避免表头在“”中断多行

Question

我的HTML代码：

<table border="3">
<tr>
    <th>a a a</td>
    <th>bbb</td>
    <th>ccc</td>
</tr>
<tr>
    <td>a</td>
    <td>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</td>
    <td>ccc</td>
</tr>
</table>

我得到了什么：

如您所见，a a a分为三行。

我无法使用aaa代替a a a（事实上，a a a在我的案例中是运营商，这三个汉字将会打破{{1} }}）。

您可以在http://jsfiddle.net/Kisnu/Lsubhd7q/中调试它。

Answer 1

缺少有效的虚拟数据会使表格中断很奇怪。

尝试使用更多“有效”的虚拟数据。除非数据中的单词长度为256个字符而没有中断，否则您不会使用“真实世界”数据。

尝试使用lorum ipsum虚拟数据：

http://jsfiddle.net/Lsubhd7q/3/

<table border="3">
<tr>
    <th>Sed ut perspiciatis accusantium doloremque</td>
    <th>voluptatem accusantium doloremque</td>
    <th>iste natus error sit voluptatem accusantium doloremque</td>
</tr>
<tr>
    <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</td>
    <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</td>
    <td>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque</td>
</tr>
</table>

Answer 2

如果您不希望标题中断，可以使用以下CSS规则：

th { white-space: nowrap; }