我想做一个冻结了顶行的html表格(这样当你垂直向下滚动时,你总是可以看到它)。
有没有一种聪明的方法可以在没有javascript的情况下实现这一点呢?
请注意,我不需要冻结左列。
发布于 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;
}
发布于 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
}
发布于 2019-04-18 19:26:21
可以对表MDN ref:的第一行使用CSS position: sticky;
。
.table-class tr:first-child>td{
position: sticky;
top: 0;
}
https://stackoverflow.com/questions/8423768
复制相似问题