锁表头

最新推荐文章于 2023-05-01 15:44:03 发布

最新推荐文章于 2023-05-01 15:44:03 发布 · 118 阅读

文章标签：

#JavaScript #ViewUI

框架专栏收录该内容

17 篇文章

订阅专栏

本文介绍了一种用于网页中表格锁定特定列或行的CSS样式实现方法。通过使用相对定位和表达式，使得部分表格单元格即使在用户滚动页面时也能保持可见。此技术特别适用于需要同时展示大量数据和关键信息的场景。

<div class="lockContainer" style="width: 99%;height:80%;overflow-x:hidden;">
<table class="formTable" width="100%" >
<thead>
<tr>
<td class="Locked" style="width:100px;TEXT-ALIGN: center;">
销售凭证
</td>
<td class="Locked" style="width:150px;TEXT-ALIGN: center;">
车工号
</td>
<td class="Locked" style="width:100px;TEXT-ALIGN: center;">
实际结束:执行(日期)
</td>
<td class="Locked" style="width:80px;TEXT-ALIGN: center;">
订单优先级
</td>

</tr>
</thead>
<tbody>循环内容.............
</tbody>

</div>

lockTable.css 内容如下

.lockContainer{
overflow: scroll;border: solid 1px #86B9E4;
}
.lockTable{
border-collapse: collapse;
}
.lockTable td
{

position: relative;
padding: 0.5px;
border-top: solid 0px #86B9E4;
border-bottom: solid 1px #86B9E4;
border-left: solid 0px #86B9E4;
border-right: solid 1px #86B9E4;
}

.lockTable td.Locked /* 水平与垂直方向锁住单元格, 不随鼠标或滚动条移动 */
{

z-index: 30; position: relative;
background-color: #f3f3f3;
text-align: center;
border-top: solid 0px #86B9E4;
border-bottom: solid 1px #86B9E4;
border-left: solid 0px #86B9E4;
border-right: solid 1px #86B9E4;
top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);

}

.lockTable td.HLocked /* 水平方向锁住单元格 */
{

z-index: 10; position: relative;
background-color: #f3f3f3;
text-align: center;
border-top: solid 0px #86B9E4;
border-bottom: solid 1px #86B9E4;
border-left: solid 0px #86B9E4;
border-right: solid 1px #86B9E4;
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);

}

.lockTable td.VLocked /* 垂直方向锁住单元格 */
{
z-index: 20; position: relative;
background-color: #f3f3f3;
text-align: center;
border-top: solid 0px #86B9E4;
border-bottom: solid 1px #86B9E4;
border-left: solid 0px #86B9E4;
border-right: solid 1px #86B9E4;
top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
}

.topbar
{
z-index: 30; position: relative;
text-align: center;
top: expression(parentNode.parentNode.parentNode.parentNode.scrollTop);
left: expression(parentNode.parentNode.parentNode.parentNode.scrollLeft);
}