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

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>的overflow到scroll,我可以滚动查看表,如果它太大的窗口中显示.那么如何让表格忽略窗口的大小,只是根据它的内容调整它的大小？

Answer 1

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

这是一个jsfiddle示例,说明如何将其放入具有可滚动溢出的div中:

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