layui设置表格表头字体_layui表格怎么把表头固定

使用layui流加载，CSS解决如何固定表头，以及解决表格表头和表格内容对不齐问题。

HTML代码：

@for(var item in zkColumnDescs){

@if(item.field != 'equipId'){

${item.title}

@}

@}

js代码：layui.use('flow', function () {

var flow = layui.flow;

flow.load({

elem: '#LAY_demo1' //流加载容器

, scrollElem: '#LAY_demo1' //滚动条所在元素，一般不用填，此处只是演示需要。

, done: function (page, next) { //执行下一页的回调

var fields = [];

$.each($("input[type='hidden']"), function (i, o) {

fields.push($(o).val());

});

var lis = [];

$.ajax({

type: 'POST',

url: '${ctxPath}/zkEquipment/zkEquipmentReadingMode/' + page,

success: function (res) {

$.each(res.data, function (index, item) {

var lisTr = [];

for (var i = 0; i < fields.length; i++) {

lisTr.push('

' + item[fields[i]] + '');

}

var lisTd = lisTr.join('');

if (index + 1 == res.data.length) {

lis.push('

' + lisTd + '');

} else {

lis.push('

' + lisTd + '');

}

});

next(lis.join(''), page < res.pages);

//解决th与td宽度不一致问题

var thArr = $("th");

var tdArr = $("tr").eq(1).find("td");

for (var i = 0; i < thArr.length; i++) {

$(thArr[i]).attr("width", $(tdArr[i]).outerWidth());

}

//设置高度

$("tbody").height($("body").height());

}

});

}

});

});

css代码：//控制表格滑动

table tbody {

display: block;

overflow-y: scroll;

}

//固定表头

table thead, tbody tr {

display: table;

width: 100%;

table-layout: fixed;

}

//调节表头宽度

table thead {

width: calc(100% - 1em)

}