我正在写一个页面,我需要一个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>
发布于 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>
发布于 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
发布于 2016-12-13 18:28:34
我通过将我的内容分成两个表解决了这个问题。
一个表是标题行。
秒也是<table>
标签,但由<div>
包装,具有静态高度和溢出滚动。
https://stackoverflow.com/questions/8232713
复制相似问题