解决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表格表头固定与内容滚动分离的完整方案,供开发者参考使用。

作者最新文章