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

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

DDD
发布: 2024-12-09 07:24:07
原创
685 人浏览过

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中文网其他相关文章!

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