Increase td so that the content is on the same line

Question

I have a table that looks something like this:

+----------------------+-------------------+ | This text is on the | This text is on | | first column | the second column | +----------------------+-------------------+ 

And I want it to look like this:

 +----------------------------------+-----------------------------------+ | This text is on the first column | This text is on the second column | +----------------------------------+-----------------------------------+ 

My table is longer than the screen and has many rows, but this is the functionality I want from it. Is there a CSS property that can do this without truncating text? If someone did not give me a javascript example, how to do this?

Answer 1

If you need broader browser support than white-space: nowrap , you can use the preliminary tag. The css solution is nicer, so use pre if you really need to:

 <tr> <td><pre>This is my non wrapping text</pre></td> <td><pre>Some more non wrapping text</pre></td> </tr> 

Obviously this will only work for plain html in your table cells, plus pre usually comes with its own default style, which you can get around with the following in CSS:

 td pre { font-family: inherit; font-size: inherit; /* ... and so on */ } 

Using inherit may be a little less support, so if you can, then it's best to actually define the style you want directly.

Answer 2

Try the white-space property:

 td { white-space: nowrap; } 

Answer 3

Try:

 <table> <tr> <td nowrap>Look ma</td> </tr> </table>