CODEWITHSUNDEEP
htmlcsshtml-table
user1789535
user1789535

Reputation: 23

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

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 &nbsp; 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.

Upvotes: 2

Views: 1027

Answers (1)

Ruan Mendes
Ruan Mendes

Reputation: 92274

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

Upvotes: 2

Related Questions