html - 使用表格布局自动制作嵌套表格，当窗口太小时宽度 100% 溢出

Question

我有一个带有 table-layout: auto 的表格，我想给它一个 100% 的宽度，但我希望它在窗口宽度低于所需的最小空间时水平溢出完全显示其内容，而不会导致显示窗口水平滚动条。

查看这些示例:

示例 1(工作)

<div style="width: 100%; overflow-x: auto">
  <table style="table-layout: auto; width: 100%; overflow-x:auto; border: 1px solid black">
    <tr>
      <td>dcsdcsdcasd1</td>
      <td>dcsdcsdd2</td>
      <td>dcsdcsdasxascasd3</td>
      <td>dcsdcsdasd4</td>
      <td>dcsdcsdxasacasd5</td>
      <td>dcsdcsdcxasd6</td>
      <td>dcsdcsxaxasdcasd7</td>
      <td>dcsdasd8</td>
      <td>dcsdd9</td>
      <td>dcsdxaxasxascsdcasd10</td>
    </tr>
  </table>
</div>

示例 2(不工作)

    <table>
      <tr>
        <td>
          <div style="width: 100%; overflow-x: auto">
            <table style="table-layout: auto; width: 100%; overflow-x:auto; border: 1px solid black">
              <tr>
                <td>dcsdcsdcasd1</td>
                <td>dcsdcsdd2</td>
                <td>dcsdcsdasxascasd3</td>
                <td>dcsdcsdasd4</td>
                <td>dcsdcsdxasacasd5</td>
                <td>dcsdcsdcxasd6</td>
                <td>dcsdcsxaxasdcasd7</td>
                <td>dcsdasd8</td>
                <td>dcsdd9</td>
                <td>dcsdxaxasxascsdcasd10</td>
              </tr>
            </table>
          </div>
        </td>
      </tr>
    </table>

当窗口调整大小并低于完全显示内容所需的宽度时，示例 2 中的内表宽度保持固定，并为整个窗口显示一个水平滚动条。这不会发生在示例 1 中，结果恰好是所需的结果。问题在于示例 2 中的包装表。但是，在我需要完成这项工作的实际元素中，我的 HTML 代码周围有包装表，我无法删除它。无论如何，我不明白为什么包装表在这方面应该有所作为。

有什么建议可以使这项工作按预期进行，即使存在外表也是如此？

Answer 1

第二个示例中的外表仍然会随着内容的需求而增长 - 这就是为什么您要为整个文档设置滚动条的原因。

首先您需要限制该表格的宽度，width: 100%; table-layout: fixed; - 这样当它里面的内表变宽时它就会溢出。