外部文件引入
<link rel="stylesheet" href="layui/css/layui.css"> <script src="layui/layui.js" charset="utf-8"></script> <link rel="stylesheet" href="common.css">
table引入
layui.use('table', function () { var table = layui.table; table.render({ elem: '#test' , url: 'user.json' , cellMinWidth: 80 //全局定义常规单元格的最小宽度,layui 2.2.1 新增 , cols: [[ {field: 'id', width: 80, title: 'ID', sort: true} , {field: 'sex', width: 80, title: '性别', sort: true} , {field: 'experience', title: '积分', sort: true} , {field: 'score', title: '评分', sort: true} , {field: 'wealth', width: 137, title: '财富', sort: true} ]] }); });
common.css
body { background-color: #111633; color: #fff; } /*边框宽度*/ .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] { border: 0px; cursor: pointer; } .layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover { background-color: transparent; cursor: pointer; color: #FFF !important; font-weight: bold !important; border-bottom: 1px solid #272b4e; } .layui-table > thead > tr { background: transparent; } /*表头样式*/ .layui-table-header > .layui-table td { font-weight: bold; } /*设置表格单元格线样式*/ .layui-table { background: transparent; } .layui-table td, .layui-table th { border-color: transparent; /*#bbb*/ } .layui-table tr { color: #FFF; border-bottom: 1px solid #272b4e; } .layui-table tr:first-child { color: #d14043; } .layui-table tr:nth-child(2) { color: #d9a56b; } .layui-table tr:nth-child(3) { color: #44e097; }
lockdatav Done!