基于其TD单元改变TABLE的宽度

Question

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

在以下方案（try it live on jsfiddle）中，您可以看到我已将每个TD的宽度指定为 100px ，并且我希望获得 300px 表（和div的水平滚动条）但实际上浏览器给它们的宽度为63px（表的宽度除以3）

有没有办法让TD确定表的宽度而不是其他方式？到目前为止，我已经为TD和TABLE尝试了不同的表格布局，显示，溢出值，但没有任何成功。

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;
}

Answer 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;
}

Answer 2

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

Answer 3

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

当然，并非人们在此发布的其他选项也不完全有效。