layui数据表格有左右冻结列时,如何设置行高和表头高度,使得冻结列和非冻结列的行高一致?
时间: 2024-02-26 19:57:24 浏览: 141
当数据表格存在左右冻结列时,需要分别设置左右两侧表格的行高和表头高度,以保证行高一致。
具体方法如下:
1. 设置左侧表格的行高和表头高度:
```
.layui-table-fixed-l .layui-table-cell {
height: 40px;
line-height: 40px;
}
.layui-table-fixed-l .layui-table-header {
height: 50px;
}
```
上面代码中,`.layui-table-fixed-l`表示左侧表格,`.layui-table-cell`表示单元格,`.layui-table-header`表示表头,通过设置`height`和`line-height`属性来设置左侧表格的行高,通过设置`height`属性来设置左侧表格的表头高度。
2. 设置右侧表格的行高和表头高度:
```
.layui-table-fixed-r .layui-table-cell {
height: 40px;
line-height: 40px;
}
.layui-table-fixed-r .layui-table-header {
height: 50px;
}
```
同样的,上面代码中,`.layui-table-fixed-r`表示右侧表格,`.layui-table-cell`和`.layui-table-header`表示单元格和表头,通过设置`height`和`line-height`属性来设置右侧表格的行高,通过设置`height`属性来设置右侧表格的表头高度。
需要注意的是,左右两侧表格的行高和表头高度需要设置成一样的,以保证整个数据表格的行高一致。
阅读全文
相关推荐

















