如何仅使 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{

  display: block;

  height: 100px;

  width: 100%;

  overflow-y: scroll;

}

如果您希望<thead>在主体滚动时保持固定：

thead tr{

  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

   overflow-x:auto;
   overflow-y:scroll;