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;
}

让源中的换行符创建中断。因此，只要您没有换行符，文本将保持一行

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

1 个答案: