layui学习笔记（一）之改变table表格样式：表头样式和隔行换色样式

layui学习笔记（一）之改变table表格样式：表头样式和隔行换色样式
作为一名Java实习生，最近需要接触到前端框架，所以开始学习国产的开源框架layui。它比easyui更加美观。用layui搭建了一个报表系统的展示页面。layui表格的原生样式不是很符合需求，因此参考别人的方法加上自己实践，成功更改了layui-table的样式。
步骤：
（1）找到layui的css文件：layui/css/layui.css;
（2）更改layui-table的默认背景颜色：

.layui-flow-more a cite:hover{opacity:.8}.layui-flow-more a i{font-size:30px;color:#737383}.layui-table{width:100%;background-color:#d9dde4;color:#0a0a0a}

，更改其中background-color值即可；
（3）更改隔行换色样式:同样的在layui.css中找到：

.layui-table[lay-even] tr:nth-child(even){background-color:#c3cedd},

更改其中的background-color值即可。
（4）更改表头样式，表头样式在layui.css中找不到，自己加了一句但是不起效果，我是在table渲染后，在done中通过jq设置样式的方法更改的：`layui.use(‘table’, function() {
var table = layui.table;
table.render({
elem : ‘#memberList’,
url : ‘/baoming/list’ //数据接口
,
size: ‘sm’,
even:true,
method:‘POST’,
id:‘testReload’,
data:tableContent,
page : true //开启分页
,
cols : [ [ //表头
{
field : ‘classType’,
title : headerArray[1],
width: ‘20%’,
//style: ‘background-color: #5FB878; color: #fff’,
sort : true,
fixed : ‘left’,
align : ‘center’
},
{
field : ‘item’,
title : headerArray[2],
sort : true,
width: ‘40%’,
//style: ‘background-color: #5FB878; color: #fff’,
fixed : ‘left’,
align : ‘center’
}, {
field : ‘money’,
title : headerArray[3],
sort : true,
width: ‘40%’,
//style: ‘background-color: #5FB878; color: #fff’,
align : ‘center’
}

] ],
**done : function(res, curr, count){

tableList=res.data;
$('th').css({'background-color': '#5792c6', 'color': '#fff','font-weight':'bold'})

}**
});
`$('th')代表表头，通过设置它的样式，就成功表头样式了。