自动使用表格布局制作嵌套表格，当窗口过小时，宽度会溢出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中不会发生这种情况，在示例1中，结果恰好是所需的结果。问题出在示例2中的包装表中。但是，在我的实际项目中，我需要完成这项工作，在我的HTML代码中有那个包装表，我无法删除它。无论如何，我不明白为什么包装台在这方面会有所不同。

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

Answer 1

第二个示例中的外部表仍然可以按照其内容需求增长-这就是为什么要获得整个文档的滚动条的原因。

您需要以width: 100%; table-layout: fixed;开头来限制表格的宽度，以便表格中的内部表格变宽时可能会溢出。