Question

通常，表格会根据其内容调整其大小。但是当一个表的适当宽度大于窗口的宽度时。表似乎开始根据窗口的宽度调整其宽度。

此表可根据其内容调整其宽度：

<table border="1">
    <tr>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
    </tr>
</table>

这个表可以根据窗口的宽度调整其宽度，一个单元格的内容可以分为三行：

<table border="1">
    <tr>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
        <td>Blah blah blah.</td>
    </tr>
</table>

我想在<div>中包含该表格，并将<div>的{{1}}设置为overflow，如果它太大，我可以滚动查看该表格用于显示窗口。那么如何让表格忽略窗口的大小，只是根据它的内容调整它的大小？

Answer 1

您可以在表格单元格内容上使用white-space: nowrap;。这样可以防止它们被破坏。

这是一个jsfiddle示例，说明如何将其放入div中可滚动溢出：

http://jsfiddle.net/VE4sU/17/

无论窗口的宽度如何，如何根据其内容调整表格的宽度？

1 个答案: