如何在 div 中使 table 水平溢出？

Question

我正在尝试将滚动条移至底部，以便在我水平滚动时显示所有表格。我尝试了很多步骤，但无法实现。

这是代码 - JSFiddle

我尝试了以下代码但无法实现。

overflow-x: auto;
white-space: nowrap;

这是我想要实现的图像。

<div style="width: 750px; height: 321px; overflow-x: auto;">
  <table align="left" cellspacing="0">
    <tbody>
      <tr>
        <th style="width: 200px; height: 85px">Demo
        </th>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
    </tbody>
  </table>
  <table align="left" cellspacing="0">
    <tbody>
      <tr>
        <th style="width: 200px; height: 85px">Demo
        </th>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
    </tbody>
  </table>
  <table align="left" cellspacing="0">
    <tbody>
      <tr>
        <th style="width: 200px; height: 85px">Demo
        </th>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
    </tbody>
  </table>
  <table align="left" cellspacing="0">
    <tbody>
      <tr>
        <th style="width: 200px; height: 85px">Demo
        </th>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
    </tbody>
  </table>
  <table align="left" cellspacing="0">
    <tbody>
      <tr>
        <th style="width: 200px; height: 85px">Demo
        </th>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
      <tr>
        <td style="height: 24px">12 (0)</td>
      </tr>
    </tbody>
  </table>
</div>

Answer 1

我删除了你几乎所有的 inline-style 并重新添加为 css-style。这使得代码更短更容易。

您的 div-wrapper 中有 5 个 table。每个 table 的宽度为 200px。所以你需要将环绕 div 宽度扩大到 1000px。 750px 不允许包含 5 个 table，每个 200px。您缺少 250 像素的宽度。这会导致 table 中的 2 个低于前 3 个 table。

最后但同样重要的是，我给了 table 属性：box-sizing: border box;。这样你就不必计算填充和边框厚度。否则你需要一个 1010px 的 wrappign div 宽度来考虑 5x 左 + 右边框，每个边框 1px。

.table-wrapper {
  min-width: 1000px;
  overflow-x: auto;
  box-sizing: border-box;
}

.table-wrapper * {
  box-sizing: border-box;
}

th {
  width: 200px;
  height: 85px;
  text-align: center;
}

td {
  height: 24px;
}

<div style="width: 750px; overflow-x: auto;">
  <div class="table-wrapper">
    <table align="left" cellspacing="0">
      <tbody>
        <tr>
          <th>Demo</th>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
      </tbody>
    </table>
    <table align="left" cellspacing="0">
      <tbody>
        <tr>
          <th>Demo</th>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
      </tbody>
    </table>
    <table align="left" cellspacing="0">
      <tbody>
        <tr>
          <th>Demo</th>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
      </tbody>
    </table>
    <table align="left" cellspacing="0">
      <tbody>
        <tr>
          <th>Demo</th>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
      </tbody>
    </table>
    <table align="left" cellspacing="0">
      <tbody>
        <tr>
          <th>Demo</th>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
        <tr>
          <td>12 (0)</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

如何在 div 中使 table 水平溢出？

How to make horizontal overflow for table inside a div?

html

css

overflow