首页 > web前端 > css教程 > 如何在可滚动 Div 中创建固定标题表?

如何在可滚动 Div 中创建固定标题表?

Barbara Streisand
发布: 2024-11-22 20:02:14
原创
697 人浏览过

How to Create a Fixed Header Table Within a Scrollable Div?

如何在可滚动 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

// Get the table and its header

var table = document.getElementById("table");

var header = table.querySelector("thead");

 

// Clone the header

var cloneHeader = header.cloneNode(true);

 

// Create a wrapper div for the cloned header

var headerWrapper = document.createElement("div");

headerWrapper.classList.add("header-wrapper");

 

// Insert the cloned header into the wrapper

headerWrapper.appendChild(cloneHeader);

 

// Insert the header wrapper into the table

table.insertBefore(headerWrapper, table.firstChild);

 

// Add event listener for scrolling

table.addEventListener("scroll", function() {

  headerWrapper.style.left = table.scrollLeft + "px";

});

登录后复制

此 JavaScript 方法复制标题,将其固定在表格顶部,并在表格滚动时更新其左侧位置以保持与表格主体对齐.

两种解决方案都有效解决了在可滚动 div 中创建固定标题表的问题。方法的选择取决于 Web 项目的具体要求和偏好。

以上是如何在可滚动 Div 中创建固定标题表?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板