如何防止表格单元格中的文字缠绕

有谁知道我可以如何防止表格单元格中的文本包装？ 这是表头，标题比它下面的数据长很多，但我需要它只显示在一行。 如果这个柱子很宽很好

我的（简化）表的HTML看起来像这样：

<table> <thead> <tr> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> <th> <div>Really long column heading</div> </th> </tr> </thead> <tbody> <tr> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> <td> <div>data</div> </td> </tr> </tbody> </table> 

标题本身被包装在th标签内的div中，这是因为与页面上的javascript相关的原因。

表格出来的标题包装成多行。 这似乎只发生在表格足够宽时，因为浏览器正试图避免水平滚动。 在我的情况下，我想要水平滚动。

有任何想法吗？

Answer 1

看看这样white-space属性：

 th { white-space: nowrap; } 

这将强制<th>的内容显示在一行上。

从链接页面，这里是white-space的各种选项：

正常
此值指示用户代理折叠空白序列，并根据需要拆分行以填充行框。

预
此值可防止用户代理崩溃空白序列。 行仅在保留的换行符处被破坏。

NOWRAP
这个值与“正常”一样折叠空白，但是抑制了文本内的换行符。

预包装
此值可防止用户代理崩溃空白序列。 行在保存的换行符处被破坏，并且必要时填充行符框。

前行
此值指示用户代理崩溃空白序列。 在保存的换行符处破坏行，并根据需要填充行符。

Answer 2

 <th nowrap="nowrap"> 

要么

 <th style="white-space:nowrap;"> 

要么

 <th class="nowrap"> <style type="text/css"> .nowrap { white-space: nowrap; } </style> 

Answer 3

至less有两种方法可以做到这一点：

在“td”标签中使用nowrap属性：

 <th nowrap="nowrap">Really long column heading</th> 

在词语之间使用不可分离的空格：

 <th>Really&nbsp;long&nbsp;column&nbsp;heading</th> 

Answer 4

我来到这个问题需要防止在连字符文字包装。

这是我做到的：

 <td><nobr>Table Text</nobr></td> 

参考：

如何防止所有浏览器上的连字符换行