如何讓一列（包含帶空格的文本）的寬度適合HTML表格中的內容？

Question

我最近試圖弄清楚如何製作一個單元/列適合寬度的內容。我發現了一個關於stackoverflow的問題，它似乎完全適合我正在尋找的賬單：How to make width of a column fit to its contents in HTML table?

我的問題是當我爲單元格的內容添加一個空格時，它添加了一個返回並且碰撞下一個單詞一條線。

所以這個代碼：

<div style="max-width:700px;"> 
<table border="1"> 

    <tr><td width="1px">Papua New Guinea:</td><td >Goroka</td></tr> 
    <tr><td colSpan="2">this is a loooooooooooooooong text</td></tr> 
</table> 

產生以下表格：

http://cl.ly/image/2F0V1J3V2u22

相反，這是我是想什麼：

http://cl.ly/image/2m0a0m0t0L0v

我意識到把 代替空格會解決這個問題。我的問題是，這是用於郵件通訊模板，並在該單元格中的文本是動態的。有時候會有空間，有時候不會。例如昨天它說玻利維亞，今天是巴布亞新幾內亞，當時我發現了這個問題。

在此先感謝您的幫助！

Answer 1

你嘗試

td { 
    white-space: nowrap; 
} 

http://jsfiddle.net/QkNqk/

您還可以使用

td { 
    white-space: pre; 
} 

爲了讓源換行造成斷。所以只要你沒有換行符，文字就會保持在一行