解决Layui表格表头固定与内容滚动分离的方案
作者:流萤时间:2026-10-23 10:49:27浏览:195
本文介绍了一种通过拆分表头与表体实现Layui表格滚动分离的方案。核心思路是创建两个独立的table元素,分别承载thead和tbody,并通过CSS绝对定位控制内容区域的滚动,同时确保列宽一致以维持视觉对齐。
Layui表格表头固定实现步骤
实现步骤如下:
首先,构建两个独立的table元素。第一个table仅包含thead部分,用于展示表头;第二个table仅包含tbody部分,用于承载数据行。
其次,将第二个table包裹在一个div容器中,并为该div设置明确的宽高属性。建议采用绝对定位方式,以便精确控制滚动区域的位置与尺寸。
最后,确保两个table中对应的th和td元素具有完全相同的宽度设置,以保证表头与数据列在视觉上严格对齐。
代码实现示例
具体实现示例如下:
HTML结构部分:
<html>
<head></head>
<body>
<div id="righttable" style="width:100%;height:70%;padding-bottom: 2px;position:relative;">
<table class="layui-table" border="1" style="width: 100%;border:1px solid #ddd;">
<thead id="thead_">
<tr>
<th>站点名称</th>
<th>站点排名</th>
<th>站点电量(kWh)</th>
</tr>
</thead>
</table>
<div style="position:absolute;bottom:2px;top:31px;overflow-y:scroll;width:100%">
<table class="layui-table" border="1" style="width: 100%;border:1px solid #ddd;">
<tbody id="tbody_">
</tbody>
</table>
</div>
</div>
</body>
</html>
CSS样式部分:
.layui-table tr th,td{white-space:nowrap;padding:5px;text-align:center;width:33.4%;}
以上即为解决Layui表格表头固定与内容滚动分离的完整方案,供开发者参考使用。
作者最新文章
JavaScript将图片转换为Base64编码的两种途径
2026-11-05 16:43:05
怎么在 Vue 或 React 项目中正确集成 animate.js
2026-11-05 10:23:38
JS注册事件:addEventListener基础语法与参数详解
2026-11-05 08:44:56
JSP和JS的区别:运行环境与服务端/客户端职责解析
2026-11-04 23:34:36
pdf.js 官方下载地址:GitHub Release 获取预编译包
2026-11-04 23:07:27
