如何使列的宽度（包含带空格的文本）适合其在 HTML 表中的内容？答案

【问题标题】：How do I make width of a column (containing text with spaces) fit to its contents in HTML table?如何使列的宽度（包含带空格的文本）适合其在 HTML 表中的内容？
【发布时间】：2012-10-21 10:12:03
【问题描述】：

我最近试图弄清楚如何使单元格/列适合其内容的宽度。我在 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

我意识到将&nbsp; 放入而不是空格可以解决此问题。我的问题是，这是在邮件通讯模板中使用的，并且该单元格中的文本是动态的。有时有空格，有时没有。例如昨天它说玻利维亚，今天是巴布亚新几内亚，这是我注意到问题的时候。

【问题讨论】：

标签： html css html-table

【解决方案1】：

你试过了吗

td {
    white-space: nowrap;
}

http://jsfiddle.net/QkNqk/

你也可以使用

td {
    white-space: pre;
}

让源代码中的换行符创建中断。所以只要你没有换行符，文本就会停留在一行

【讨论】：