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

Question

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

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

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

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

.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

请勿在{{1​​}}上设置display:block。只需将溢出放在tbody父级上，就像Twitter Bootstrap那样。它适用于跨浏览器/跨设备：

<table>

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