根据 TD 单元格更改 TABLE 的宽度答案

【问题标题】：Change width of TABLE based on its TD cells根据 TD 单元格更改 TABLE 的宽度
【发布时间】：2018-11-19 00:21:23
【问题描述】：

我正在寻找一种通过指定表格 TD 的宽度来指定表格宽度的方法。

在以下场景 (try it live on jsfiddle) 中，您可以看到我已将每个 TD 的宽度指定为 100px，我希望得到一个 300px 表（以及div 的水平滚动条），但实际上浏览器给它们的宽度为 63px（即表格宽度除以 3）

有没有办法让 TD 决定表格的宽度而不是其他方式？到目前为止，我已经为 TD 和 TABLE 尝试了不同的 table-layout、display、overflow 值，但没有任何成功。

html:

<div>
    200px
    <table>
        <tr>
            <td>100px</td>
            <td>100px</td>
            <td>100px</td>
        </tr>
    </table>
</div>

和一个最小的 CSS：

div {
    width: 200px; 
    height: 300px; 
    border: solid 1px red; 

    overflow-x: scroll;
}

td {
    width:100px; 
    border: solid 1px #000;
}

table { 
    border-collapse: collapse;
}

【问题讨论】：

“我正在寻找一种通过指定表格 TD 的宽度来指定表格宽度的方法。”我可以问为什么吗？也许您的问题还有其他解决方案。
表格是动态生成的。只有单元格大小是已知的。表格必须超出其容器边界，我们应该会看到一个滚动条。

标签： html css html-table

【解决方案1】：

一个简单的解决方案是让 td 的内容为 100px 宽。

<div>
    200px
    <table>
        <tr>
            <td><div class="content">100px</div></td>
            <td><div class="content">100px</div></td>
            <td><div class="content">100px</div></td>
        </tr>
    </table>
</div>

.content {
    width: 100px;
}

【讨论】：

我正要发布那个。
这可能有效，但我找到了另一种纯粹基于 css 的解决方案。不过谢谢。

【解决方案2】：

最简单的解决方案似乎是为 TD 设置 min-width 而不是 width。

【讨论】：

这行得通。只需确保 td 内没有任何宽度为 100% 的项目（如 div），否则单元格将扩展为表格的整个宽度。
@meub：设置min-width 和max-width 不能解决这个问题吗？

【解决方案3】：

如果您要动态生成表格，您可以在使用表格时动态设置表格的宽度。只需计算所需的宽度，然后将style="width:300px;"（或其他）添加到<table> 标记。

当然，并不是说人们在这里发布的其他选项也不是完全有效的。

【讨论】：