如何在可滚动 Div 中创建固定标题表
常见的 Web 开发挑战是创建一个具有固定标题的表,即使用户垂直滚动,该表也保持可见穿过桌体。在本文中,我们将使用两种方法探索此问题的解决方案:自定义 CSS 解决方案和基于 JavaScript 的解决方案。
自定义 CSS 解决方案
自定义 CSS 解决方案依赖于表头的绝对定位,并在表体滚动时保持其位置。可以使用以下 CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | #table-wrapper {
position: relative;
}
#table-scroll {
height: 250px;
overflow: auto;
margin-top: 20px;
}
#table-wrapper table {
width: 100%;
}
#table-wrapper table thead th {
position: absolute;
top: 0;
z-index: 2;
height: 20px;
width: 35%;
border: 1px solid red;
}
|
登录后复制
此方法只是将标题定位在表格主体上方,并在滚动期间保持其顶部位置。
JavaScript 解决方案
另一种方法利用 JavaScript 来修复标题并处理滚动行为。以下代码片段演示了这种方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | var table = document.getElementById( "table" );
var header = table.querySelector( "thead" );
var cloneHeader = header.cloneNode(true);
var headerWrapper = document.createElement( "div" );
headerWrapper.classList.add( "header-wrapper" );
headerWrapper.appendChild(cloneHeader);
table.insertBefore(headerWrapper, table.firstChild);
table.addEventListener( "scroll" , function () {
headerWrapper.style.left = table.scrollLeft + "px" ;
});
|
登录后复制
此 JavaScript 方法复制标题,将其固定在表格顶部,并在表格滚动时更新其左侧位置以保持与表格主体对齐.
两种解决方案都有效解决了在可滚动 div 中创建固定标题表的问题。方法的选择取决于 Web 项目的具体要求和偏好。
以上是如何在可滚动 Div 中创建固定标题表?的详细内容。更多信息请关注PHP中文网其他相关文章!