如何防止表格單元格中的文字換行

Question

有誰知道我可以如何防止表格單元格中的文字換行？這是表頭的標題，標題比它下面的數據長很多，但我只需要它在一行上顯示。如果色譜柱非常寬，則可以。

我（簡化）表的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標籤的相關頁面上的JavaScript原因裏面一個div。

該表是與包裝到多行的標題出來。這似乎只發生在表格足夠寬時，因爲瀏覽器正試圖避免水平滾動。不過，就我而言，我想要水平滾動。

任何想法？

Answer 1

使用NOWRAP的 「TD」 標籤內屬性

看一看的white-space財產，像這樣使用：

th { 
    white-space: nowrap; 
} 

這將強制<th>的內容顯示在一行上。

從鏈接頁面，這裏有各種選項white-space：

正常
該值指示用戶代理崩潰的白空間序列，並打破在必要時填補行框線條。

pre
此值可防止用戶代理崩潰空白序列。行僅在保留的換行符處被破壞。

NOWRAP
此值崩潰空白爲「正常」，但抑制文本中的換行符。

預包裝
此值可防止用戶代理崩潰空白序列。線條在保留的換行符處被打破，並根據需要填充線條框。

pre-line
此值指示用戶代理崩潰空白序列。線條在保留的換行符處被打破，並根據需要填充線條框。

Answer 2

至少有兩種方法可以做到這一點：

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

用你的話之間的非易碎空間：

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

Answer 3

<th nowrap="nowrap"> 

或

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

或

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

Answer 4

我來到了這個問題，需要以防止文本換行的連字符。

這是我做的：

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

參考：

How to prevent line break at hyphens on all browsers