使用 table-布局自动嵌套 table，当 window 太小时宽度 100% 溢出

Question

我有一个 table 和 table-layout: auto，我想给它一个 100% 的宽度，但我希望它在 window 宽度低于最小值时水平溢出space 需要完整显示其内容，而不会导致显示 window 水平滚动条。

查看这些示例：

示例 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>

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

有什么建议可以使它按预期工作，即使存在外部 table？

Answer 1

在第二个示例中，您的外部 table 仍会根据其内容的需求增长 - 这就是为什么您要为整个文档设置滚动条的原因。

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

使用 table-布局自动嵌套 table，当 window 太小时宽度 100% 溢出

Make nested table with table-layout auto, width 100% overflow when window too small

html

css

html-table

overflow

示例 1（有效）

示例 2（不工作）