如何仅使 tbody 在具有动态列宽的表格中垂直滚动

Question

我在页面中有一个表格，我只需要为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 的解决方案，我宁愿不使用它们，除非它是绝对的、最后的选项。有人可以建议一下吗？

Answer 1

要使<tbody>可滚动：tbody{&nbsp; display: block;&nbsp; height: 100px;&nbsp; width: 100%;&nbsp; overflow-y: scroll;}如果您希望<thead>在主体滚动时保持固定：thead tr{&nbsp; display: block}

Answer 2

简单的非理想解决方案（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

Answer 3

我不确定这是否能回答你的问题。如果信息太多，y轴总是有滚动，x轴只有滚动CSS&nbsp;&nbsp;&nbsp;overflow-x:auto; &nbsp;&nbsp;&nbsp;overflow-y:scroll;