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

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

Barbara Streisand
发布: 2024-12-13 12:14:22
原创
384 人浏览过

How to Make HTML Table Headers Stay Visible When Scrolling?

使用包装 Div 在 HTML 表格上显示滚动条

创建 HTML 表格时,可能需要显示滚动条即使表格大小超过其容器,也允许查看表格的内容。

要实现此目的,请换行非静态定位的

<div> 内的表格元素并为其分配一个 Overflow:auto CSS 属性。这将为表格内容创建一个可滚动区域。

要在滚动时保持表格标题(位于 部分)可见,请将它们绝对定位并将它们放在滚动区域的顶部。这可以防止标题被可滚动内容隐藏。

下面是一个包含滚动条和固定标题的示例:

CSS:

#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;
}
登录后复制

HTML:

<div>
登录后复制

通过应用此技术,您可以创建一个允许滚动同时保持可见标题的 HTML 表格,如如用户提供的示例所示。

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

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