首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >仅冻结html表格的顶行(固定表格标题滚动)

仅冻结html表格的顶行(固定表格标题滚动)
EN

Stack Overflow用户
提问于 2011-12-08 06:51:40
回答 8查看 384.8K关注 0票数 159

我想做一个冻结了顶行的html表格(这样当你垂直向下滚动时,你总是可以看到它)。

有没有一种聪明的方法可以在没有javascript的情况下实现这一点呢?

请注意,我不需要冻结左列。

EN

回答 8

Stack Overflow用户

发布于 2019-10-26 02:14:52

我知道这有几个答案,但没有一个对我有真正的帮助。我找到了这篇文章,它解释了为什么我的sticky没有像预期的那样运行。

基本上,您不能在<thead><tr>元素上使用position: sticky;。但是,它们可以在<th>上使用。

我需要的最小代码如下:

table {
  text-align: left;
  position: relative;
}

th {
  background: white;
  position: sticky;
  top: 0;
}

通过将表设置为相对,可以将<th>设置为粘滞,顶部为0 1:https://css-tricks.com/position-sticky-and-table-headers/

注意:有必要用一个带有max-height的div来包装表格:

<div id="managerTable" >
...
</div>

其中:

#managerTable {
    max-height: 500px;
    overflow: auto;
}
票数 71
EN

Stack Overflow用户

发布于 2015-04-23 10:10:16

根据Pure CSS Scrollable Table with Fixed Header的说法,我编写了一个DEMO,通过将overflow:auto设置为tbody,可以轻松地修复标头。

table thead tr{
    display:block;
}

table th,table td{
    width:100px;//fixed width
}


table  tbody{
  display:block;
  height:200px;
  overflow:auto;//set tbody to auto
}
票数 49
EN

Stack Overflow用户

发布于 2019-04-18 19:26:21

可以对表MDN ref:的第一行使用CSS position: sticky;

.table-class tr:first-child>td{
    position: sticky;
    top: 0;
}
票数 24
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/8423768

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档