html - 如何在 100% 宽度表中保持 TD 宽度？

Question

我有一个适合整个 html 正文的 100% 宽度的表格。每个<td>都有一个固定的宽度，总和超过了身体的宽度。

的HTML：

<table>
        <tr>
            <td>test</td>
            <td>test</td>
            <td>test</td>
            <td>test</td>

etc... etc...

            <td>test</td>
            <td>test</td>
            <td>last one in the line</td>
        </tr>
    </table>

简单的 CSS 来演示：

table td {
    width: 100px;
    border: solid 1px black;
    white-space: nowrap;
}

这是一个示例 JSFiddle。

问题是表格没有溢出正文并显示水平滚动条，而是减小了每个<td>的宽度以适应文档。

如何强制宽度并显示滚动条？

Answer 1

改为min-width强制单元格始终保持宽度。

table td {
    min-width: 100px;
    border: solid 1px black;
    white-space: nowrap;
}

演示：http: //jsfiddle.net/H55Se/3/

Answer 2

使用使用最小宽度，如下

table td {min-width: 100px; border: solid 1px black;white-space: nowrap;}