2

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

在以下场景中（在 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;
}
4

3 回答 3

3

一个简单的解决方案是使 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;
}
于 2013-08-23T16:19:52.033 回答
3

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

于 2013-08-23T16:22:04.273 回答
0

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

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

于 2013-08-23T16:38:27.453 回答