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

Question

我在页面中的表中只需要为表的tbody部分实现垂直滚动。我的表有动态宽度的列，如果列的宽度增加导致表溢出，则实现水平滚动。我想要的是只让表主体在垂直溢出时滚动，但希望表头保持可见。我实现的是垂直滚动整个表。

下面是我现在的代码。它有虚拟数据，因为我不能发布实际的代码，但是结构是相同的(琴键)：

​

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>

​

针对这个问题，我已经在堆栈溢出上检查了多个解决方案，但是它们都为它们的列设置了一个固定的宽度，然后在超过宽度的情况下将内容包装在里面。有固定头和可滚动体的桌子是唯一没有完全破坏我的页面的解决方案，但是不能工作，它为标题和正文中的列提供了不同的列宽。

所有其他解决方案，即使是使用嵌套表的解决方案，都使用固定宽度列，而那些不使用js/jQuery的解决方案，我宁愿不使用，除非它是绝对的、最后的选项。谁能提点建议吗？

Answer 1

若要使<tbody>可滚动：

tbody{
  display: block;
  height: 100px;
  width: 100%;
  overflow-y: scroll;
}

如果您想让<thead>在身体滚动时保持固定状态：

thead tr{
  display: block
}

Answer 2

我不确定这是不是在回答你的问题。

如果y轴总是有卷轴，而x轴只有在有太多信息的情况下才有滚动

CSS

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

Answer 3

我亲自发现了这个问题，并找到了@Abe Caymo发布的答案的替代解决方案。

简单非理想解(安倍)

安倍解决方案的问题在于，在你开始使用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表布局的一个更好的解决方案是将thead和tfoot设置为position: sticky。

一些关于这一方法的注意事项和理解。

• overflow或元素实际上是table的div容器。您必须拥有这个，这就是您可以用来控制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>

​

最终结果如下所示，所有列都分别对齐.

​

​

还请参见在这元素上使用display: grid的table解决方案。