首页 >web前端 >css教程 >如何在滚动正文时保持 HTML 表格标题可见?

如何在滚动正文时保持 HTML 表格标题可见?

DDD
DDD原创
2024-12-09 07:24:07694浏览

How to Keep HTML Table Headers Visible While Scrolling the Body?

如何在 html 表格上显示滚动条

创建 HTML 表格时,有时需要让标题保持可见,即使表格内容滚动也是如此。

要实现此目的,请将表格包装在具有 Overflow:auto CSS 属性的非静态定位 div 中。然后,将元素绝对定位在表头中,如下所示:

#table-wrapper {
  position:relative;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
#table-wrapper table {
  width:100%;
}
#table-wrapper table * {
  background:yellow;
  color:black;
}
#table-wrapper table thead th .text {
  position:absolute;   
  top:-20px;
  z-index:2;
  height:20px;
  width:35%;
  border:1px solid red;
}
<div>

这将创建一个具有固定表头和滚动正文的表,类似于提供的 URL 中的方法 2。

以上是如何在滚动正文时保持 HTML 表格标题可见?的详细内容。更多信息请关注PHP中文网其他相关文章!

声明:
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn