html - 当 tbody 设置为其容器的宽度时，我可以在 tbody 的溢出上实现水平滚动吗？

Question

我正在努力实现以下目标:

1. 包含 div
内的 table 元素
2. table 没有设置width(可以是 100%)，但它不能比包含的 div 宽
3. table 的单元格是固定宽度的(使用 width 和/或 max/min 宽度)
4. table 单元格的 width 比包含 div 的宽度宽
5. table中的tbody元素需要水平滚动

这可能吗？在下面的代码片段中，您可以看到我想要实现的目标。容器的宽度为 200px。 table 有 3 列，每列 100px(总宽度为 300px)。您可以看到容器的背景是红色的，并且比 table 宽度短。我的目标是让 tbody 的宽度保持在容器的宽度 (200px) 并水平滚动溢出。

但是，我知道 table 和 tbody 元素的默认行为有一些规则可以防止这种情况发生。有没有一种方法可以配置它，以便 tbody 水平滚动溢出，无需在 tbody 元素中指定硬 width ?

.container-container {
  background-color:#ccffcc;
}
.container {
  background-color:#ffcccc;
  width: 200px;
}
table {
  border-collapse: collapse;
}
td {
  width: 100px;
  min-width: 100px;
  background-color: #e0e0e0;
}
tbody {
  display: block;
  margin-top: 29px;
  width:100%;
  overflow: auto;

}

  <div class="container">
    <table id="callLogExplorer">
      <tbody>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
      </tbody>
    </table>

  </div>

Answer 1

不要设置 display:block在 tbody .只需将溢出放在 <table> 上parent，就像 Twitter Bootstrap 那样。它适用于跨浏览器/跨设备:

.tableResponsive {
  background-color:#ffcccc;
  overflow-x: auto;
  width: 200px; /* or set max-width on it max-width: 100vw; */
}
#callLogExplorer {
  margin-top: 29px;
}
table {
  border-collapse: collapse;
}
td {
  min-width: 100px;
  background-color: #e0e0e0;
}

<div class="tableResponsive">
    <table id="callLogExplorer">
      <tbody>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
        <tr>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
          <td>asdfasd fas</td>
        </tr>
      </tbody>
    </table>

  </div>