如何让表格单元格自动占用表格布局的 100% 宽度：已修复？

Question

我对我网站上的表格行为有以下要求：

• 单元格永远不会有任何明确的宽度，我将根据内容将单元格大小留给浏览器
• 整个表格的宽度不得超过 100%
• 在某些边缘情况下，即使强制最大宽度和表格换行，总宽度仍可能超过 100%（例如在移动设备上）。在这种情况下，我希望表格的宽度为 100%，并且可以水平滚动。

要完成上述操作，请查看此JSBin。

HTML：

<table>
    <thead>
    <tr>
    <th>Column one</th>
    <th>Column two</th>
    <th>Column three</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>1.1</td>
    <td>2.1</td>
    <td>3.1</td>
    </tr>
    <tr>
    <td>1.2</td>
    <td>2.2</td>
    <td>3.2</td>
    </tr>
    <tr>
    <td>1.3</td>
    <td>2.3</td>
    <td>3.3</td>
    </tr>
    </tbody>
  </table>

CSS：

table {
    display: block;
    table-layout: fixed;
    overflow-x: scroll;
    max-width:100%;
    background-color: #697A09 !important;
}

th, td {
    padding: 10px;
    background-color:white;
    width:auto;
}

此设置背后的想法：表格的最大宽度仅在表格设置为 display:block 时才有效。边缘情况（小视口）的水平滚动是使用 overflow-x 结合 table-layout:fixed 完成的。

这满足了我的要求，但是有一个意想不到的问题：使用 display:block 会使表格本身使用 100% 的宽度。但是，单元格似乎并没有遵循 100%，因为我试图在示例中使用不同的背景颜色突出显示，它们占用的表格宽度远低于 100%。

我基本上想要的是让表格始终占据它所在的任何父元素的 100%，并让单元格分布在这 100% 上，而无需明确设置它们的宽度。

这样的事情可能吗？

Answer 1

代码可能有如下帮助：

table {
    overflow-x: scroll;
    max-width:100%;
    background-color: #697A09 !important;
    width: 100%;
}

    th, td {
    padding: 10px;
    background-color:white;
    width:auto;
}