如何仅使 tbody 在具有动态列宽的表格中垂直滚动
我在页面中有一个表格，我只需要为tbody表格的一部分实现垂直滚动。我的表具有动态宽度的列，如果列宽度的增加导致表溢出，则会实现水平滚动。我想要的是只有表格主体在垂直溢出时滚动，但希望表格标题保持可见。我所实现的垂直滚动整个表格
以下是我现在的代码。它有虚拟数据，因为我无法发布实际代码，但结构是相同的（jsfiddle 链接）：
th,
td {
text-align: left;
padding: 5px;
outline: solid 0.5px;
}
table {
table-layout: auto;
width: 100%;
white-space: nowrap;
overflow-x: scroll;
overflow-y: scroll;
height: 100px;
display: block;
}
.container {
width: 300px;
}
<div class="container">
<table>
<thead>
<tr>
<th>Title 1</th>
<th>Name</th>
<th>Address</th>
<th>Col4</th>
<th>Col5</th>
<th>Col6</th>
</tr>
</thead>
<tbody>
<tr>
<td>Title 2</td>
<td>Jane Doe</td>
<td>dfss</td>
<td>sdffsffsfd</td>
<td>sfsfs</td>
<td>sfsff</td>
</tr>
<tr>
<td>Title 3</td>
<td>John Doe</td>
<td>sasas</td>
<td>eeeee</td>
<td>eEe</td>
<td>sfff</td>
</tr>
<tr>
<td>Title 4 is a long title</td>
<td>Name1</td>
<td>dfss</td>
<td>sdffsffsfd</td>
<td>sfsfs</td>
<td>sfsff</td>
</tr>
<tr>
<td>Title 5 is shorter</td>
<td>Name 2</td>
<td>dfsf</td>
<td>sdfsf</td>
<td>dfsf</td>
<td>sdfsf</td>
</tr>
<tr>
<td>Title 6</td>
<td>Name 3</td>
<td>sasas</td>
<td>eeeee</td>
<td>eEe</td>
<td>sfff</td>
</tr>
</tbody>
</table>
</div>
我已经在 stackoverflow 上检查了这个问题的多个解决方案，但它们都为其列设置了固定宽度，然后如果内容超出宽度，则使用将内容包裹在里面。具有固定 thead 和可滚动 tbody 的表 是唯一没有完全搞乱我的页面的解决方案，但不起作用，它为标题和正文中的列提供了不同的列宽。
所有其他解决方案，即使是使用嵌套表的解决方案也使用固定宽度列，以及那些不使用 js/jQuery 的解决方案，我宁愿不使用它们，除非它是绝对的、最后的选项。有人可以建议一下吗？
跃然一笑3回答
-
MYYA
要使<tbody>可滚动：tbody{ display: block; height: 100px; width: 100%; overflow-y: scroll;}如果您希望<thead>在主体滚动时保持固定：thead tr{ display: block} -
森栏
简单的非理想解决方案（Abe）Abe 的解决方案的问题在于，在您开始使用thead和之前它都可以正常工作tfoot。添加这些后，您很快就会意识到表格列布局不再同步tbody、thead和之间的列宽tfoot。请参阅下面的演示...th,td { text-align: left; padding: 5px; outline: solid 0.5px;}table { white-space: nowrap; display: block;}tbody{ display: block; height: 100px; overflow-y: auto;}<div class="container"> <table> <thead> <tr> <th>Title 1</th> <th>Name</th> <th>Address</th> <th>Col4</th> <th>Col5</th> <th>Col6</th> </tr> </thead> <tbody> <tr> <td>Title 2</td> <td>Jane Doe</td> <td>dfss</td> <td>sdffsffsfd</td> <td>sfsfs</td> <td>sfsff</td> </tr> <tr> <td>Title 3</td> <td>John Doe</td> <td>sasas</td> <td>eeeee</td> <td>eEe</td> <td>sfff</td> </tr> <tr> <td>Title 4 is a long title</td> <td>Name1</td> <td>dfss</td> <td>sdffsffsfd</td> <td>sfsfs</td> <td>sfsff</td> </tr> <tr> <td>Title 5 is shorter</td> <td>Name 2</td> <td>dfsf</td> <td>sdfsf</td> <td>dfsf</td> <td>sdfsf</td> </tr> <tr> <td>Title 6</td> <td>Name 3</td> <td>sasas</td> <td>eeeee</td> <td>eEe</td> <td>sfff</td> </tr> </tbody> <tfoot> <tr> <th>Title 1</th> <th>Name</th> <th>Address</th> <th>Col4</th> <th>Col5</th> <th>Col6</th> </tr> </tfoot> </table></div>稍微理想的解决方案维护表格布局的更好解决方案是将和auto设置为。theadtfootposition: sticky关于这种方法的一些注意事项和需要理解的事情。实际滚动的oroverflow元素是 的 div 容器table。您必须拥有这个，并且您可以使用它来控制table. 因此，滚动条将始终是可滚动的完整高度table。必须设置为不透明值，否则当滚动时标题经过下方时，background-color其中的行将显示在标题后面。tbody边框/轮廓很难正确设置，但只要稍加技巧，您就可以找到兼容的样式。thead向或 中添加边框或轮廓tfoot不会产生粘性。.container { height: 140px; min-height: 100px; overflow: auto; resize: vertical; /* only for demo */}thead,tfoot { /* must background-color otherwise transparent will show rows underneath */ background-color: white; position: sticky;}thead { margin-bottom: 0; top: 0;}tfoot { margin-top: 0; bottom: 0;}th,td { text-align: left; padding: 5px; outline: solid black 0.5px;}table { width: 100%;}<div class="container"> <table> <thead> <tr> <th>Title 1</th> <th>Name</th> <th>Address</th> <th>Col4</th> <th>Col5</th> <th>Col6</th> </tr> </thead> <tbody> <tr> <td>Title 2</td> <td>Jane Doe</td> <td>dfss</td> <td>sdffsffsfd</td> <td>sfsfs</td> <td>sfsff</td> </tr> <tr> <td>Title 3</td> <td>John Doe</td> <td>sasas</td> <td>eeeee</td> <td>eEe</td> <td>sfff</td> </tr> <tr> <td>Title 4 is a long title</td> <td>Name1</td> <td>dfss</td> <td>sdffsffsfd</td> <td>sfsfs</td> <td>sfsff</td> </tr> <tr> <td>Title 5 is shorter</td> <td>Name 2</td> <td>dfsf</td> <td>sdfsf</td> <td>dfsf</td> <td>sdfsf</td> </tr> <tr> <td>Title 6</td> <td>Name 3</td> <td>sasas</td> <td>eeeee</td> <td>eEe</td> <td>sfff</td> </tr> </tbody> <tfoot> <tr> <th>Title 1</th> <th>Name</th> <th>Address</th> <th>Col4</th> <th>Col5</th> <th>Col6</th> </tr> </tfoot> </table></div>最终结果将如下所示，所有列分别对齐......https://i.stack.imgur.com/wSoQl.gif 另请参阅在元素上使用的此解决方案。display: gridtable -
慕标琳琳
我不确定这是否能回答你的问题。如果信息太多，y轴总是有滚动，x轴只有滚动CSS overflow-x:auto; overflow-y:scroll;
随时随地看视频慕课网APP
相关分类
Html5