layui表头宽度和表格一致_layui表格如何把表头固定

layui表格如何把表头固定

发布时间：2020-09-21 09:58:37

来源：亿速云

阅读：126

作者：小新

小编给大家分享一下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)

}

看完了这篇文章，相信你对layui表格如何把表头固定有了一定的了解，想了解更多相关知识，欢迎关注亿速云行业资讯频道，感谢各位的阅读！

layui表头宽度和表格一致_layui表格如何把表头固定相关推荐

layui表头宽度和表格一致_layui表格固定表头统一处理方案
实现效果:表头和底部分页固定,鼠标滚动只会滚顶body中数据.效果如下: 1.找到layui中的table.js文件,在变量table中加入属性,如图红框中内容: fiexdRowHeight:是否开 ...
layui关闭表格编辑_Layui表格table关闭拖拽列宽、禁用拖拽列宽
table 模块是Layui的又一走心之作,在 layui 2.0 的版本中全新推出,是 layui 最核心的组成之一.它用于对表格进行一些列功能和动态化数据操作,涵盖了日常业务所涉及的几乎全部需求. ...
layui 表格字体_Layui表格自定义表格字体样式
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 Layui表格中单元格样式可通过templet-自定义模板改变单元格内容样式: 在默认情况下,单元格的内容是完全按照数据接口返回的content原样输出的 ...
layui控制table列长度_layui表头宽度和表格一致_天天都要用的10个word表格技巧，工作再忙都要学会！！......
Hello,各位叨友们好呀!我是叨叨君~ 说起制作表格可不是Excel的专利,日常工作中,用Word制作表格也是常有的事儿,对于有些小伙伴来说,可能天天都要用,那么,用Word制作表格,有哪些技巧是我 ...
layui分成两列相同的表格_layui表格反转的一个简单实现方式
表格反转,或者叫行列转换,估计都不陌生,先看效果图: 测试页面: https://sun_zoro.gitee.io/layuitableplug/testTableCheckboxDisabled ...
layui清空表单数据_Layui表格初始化
然后加载和初始化layui的table模块,elem指定原始表格元素选择器(推荐id选择器),url是连接的数据接口. cols是表头的内容,field设定字段名,是表格数据列的唯一标识,字段名要和数 ...
layui表格添加链接列_Layui表格之多列合并展示
前言: 当我们在使用Layui的时候,有时表格中的列比较多,展示出来肯定是有问题的,这样就不得不舍弃一些列不展示,不展示是一种解决方案,但是更好的解决方案应该是合并展示. 实现效果: 实现代码参考: ...
获取layui表格单元格的数据_Layui数据表格之获取表格中所有的数据方法
数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为Layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的JS对象数组用来保存数据表格中的原 ...
laytpl遍历实体列表_Layui数据表格之获取表格中所有的数据方法
数据表格中的数据是通过直接赋值的方式.这里实际上思想是反过来的,将拿数据表格中的所有数据,转换为layui数据表格拿原始数据去渲染数据表格. 1.创建一个作用域合适的js对象数组用来保存数据表格中的原 ...

layui表头宽度和表格一致_layui表格如何把表头固定

layui表头宽度和表格一致_layui表格如何把表头固定相关推荐

最新文章

热门文章