如何在html表格上显示滚动条
如何在html表格上显示滚动条
提问于 2011-11-23 03:38:45
我正在写一个页面，我需要一个html表来维护设置的大小。我需要表格顶部的标题一直留在那里，但我还需要表格的主体滚动，无论向表格中添加了多少行。
我希望它看起来像这个url中的方法2：http://www.cssplay.co.uk/menu/tablescroll.html
我尝试过这样做，但没有出现滚动条：
tbody {
height: 80em;
overflow: scroll;
}<table border=1 id="qandatbl" align="center">
<tr>
<th class="col1">Question No</th>
<th class="col2">Option Type</th>
<th class="col1">Duration</th>
</tr>
<tbody>
<tr>
<td class='qid'></td>
<td class="options"></td>
<td class="duration"></td>
</tr>
</tbody>
</table>
回答 7
Stack Overflow用户
回答已采纳
发布于 2011-11-23 03:45:43
像这样的东西？
这个想法是将<table>包装在一个非静态定位的<div>中，它有一个overflow:auto CSS属性。然后确定元素在<thead>中的位置。
#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 id="table-wrapper">
<div id="table-scroll">
<table>
<thead>
<tr>
<th><span class="text">A</span></th>
<th><span class="text">B</span></th>
<th><span class="text">C</span></th>
</tr>
</thead>
<tbody>
<tr> <td>1, 0</td> <td>2, 0</td> <td>3, 0</td> </tr>
<tr> <td>1, 1</td> <td>2, 1</td> <td>3, 1</td> </tr>
<tr> <td>1, 2</td> <td>2, 2</td> <td>3, 2</td> </tr>
<tr> <td>1, 3</td> <td>2, 3</td> <td>3, 3</td> </tr>
<tr> <td>1, 4</td> <td>2, 4</td> <td>3, 4</td> </tr>
<tr> <td>1, 5</td> <td>2, 5</td> <td>3, 5</td> </tr>
<tr> <td>1, 6</td> <td>2, 6</td> <td>3, 6</td> </tr>
<tr> <td>1, 7</td> <td>2, 7</td> <td>3, 7</td> </tr>
<tr> <td>1, 8</td> <td>2, 8</td> <td>3, 8</td> </tr>
<tr> <td>1, 9</td> <td>2, 9</td> <td>3, 9</td> </tr>
<tr> <td>1, 10</td> <td>2, 10</td> <td>3, 10</td> </tr>
<!-- etc... -->
<tr> <td>1, 99</td> <td>2, 99</td> <td>3, 99</td> </tr>
</tbody>
</table>
</div>
</div>
Stack Overflow用户
发布于 2021-02-16 01:33:22
不知道为什么没有人提到只对元素使用内置的粘性标题样式。对我来说效果很好。
.tableContainerDiv {
overflow: auto;
max-height: 80em;
}
th {
position: sticky;
top: 0;
background: white;
}如果你需要响应式的(或类似的)，在in @media上设置一个最小宽度。
请参阅Table headers position:sticky或Position Sticky and Table Headers
Stack Overflow用户
发布于 2016-12-13 18:28:34
我通过将我的内容分成两个表解决了这个问题。
一个表是标题行。
秒也是<table>标签，但由<div>包装，具有静态高度和溢出滚动。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/8232713
复制相关文章
相似问题