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 :
layui学习笔记(一)之改变table表格样式:表头样式和隔行换色样式
最新推荐文章于 2025-03-28 11:22:56 发布