How do I make width of a column (containing text with spaces) fit to its contents in HTML table?

Question

I was recently trying to figure out how to make a cell/column fit it's width to it's content. I found a question on stackoverflow that seemed to perfectly fit the bill for what I was looking for: How to make width of a column fit to its contents in HTML table?

My issue was when I added a space to the content of the cell, it added a return and bumps the next word down a line.

So this code:

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

Produces this table:

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

Instead, this is what I was wanting:

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

I realize that putting   in instead of spaces would fix this. My issue is that this is being used in a mail newsletter template, and the text in that cell is dynamic. Sometimes there are spaces, sometimes not. For example yesterday it said Bolivia, today Papua New Guinea which is when I noticed the problem.

Answer 1

Did you try

td {
    white-space: nowrap;
}

http://jsfiddle.net/QkNqk/

You can also use

td {
    white-space: pre;
}

To let newlines in the source create breaks. So as long as you don't have a line break,the text will stay in one line