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

Question

我正在尝试实现以下内容：

1. 包含div
的table元素
2. table没有width集(可能为100％(，但它不需要宽度比包含div
3. table的单元格是固定宽度(使用width和/或max/min width(
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

不要在tbody上设置display:block。只需将您的溢出放在<table>父母上，就像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>