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

【问题标题】：How to only make tbody vertically scrollable in a table which has dynamic column widths如何仅在具有动态列宽的表格中使 tbody 垂直滚动
【发布时间】：2020-07-07 00:48:15
【问题描述】：

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

以下是我现在的代码。它具有虚拟数据，因为我无法发布实际代码，但结构相同（jsfiddle link）：
HTML

<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>

CSS

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;
}

我已经在 stackoverflow 上检查了多个解决方案来解决这个问题，但是它们都为它们的列设置了一个固定的宽度，然后如果它超过了宽度，就使用将内容包装在里面。 table with fixed thead and scrollable tbody 是唯一没有完全弄乱我的页面但不起作用的解决方案，它为标题和正文中的列提供了不同的列宽。

所有其他解决方案，即使是使用嵌套表的解决方案也使用固定宽度列，以及不使用 js/jQuery 的解决方案，除非它是绝对的、最后的选项，否则我宁愿不使用。谁能给点建议？

【问题讨论】：

从我读到的，你想要的是：<tbody> 默认实现垂直滚动。检测表格是否水平溢出，然后也将垂直滚动应用于 <thead> ，对吗？您现在将看到您需要 JS 来“检测”表格是否溢出，以便您可以应用适当的 css 样式。
没有没有。只是简单的垂直溢出。如果问题令人困惑，我将对其进行编辑。我只提到了水平滚动，因为我的列宽是动态的，我想解释一下我是如何处理它的，所以我没有得到为我的列或任何东西设置宽度的建议

标签： html css sass bootstrap-4

【解决方案1】：

使<tbody> 可滚动：

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

如果你想让<thead> 在正文滚动时保持固定：

thead tr{
  display: block
}

【讨论】：

它不起作用。标题中的列和正文中的列具有不同的宽度。

【解决方案2】：

我不确定这是否回答了您的问题。

如果y轴总是有滚动条而x轴只有如果信息太多，则滚动

CSS

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

【讨论】：