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 many lines, but this is the functionality I want from it. Is there a CSS property that can make this happen without truncating the text? If not could somebody point me to a javascript example on how to do this?

Answer 1

If you need wider browser support than white-space: nowrap you can use a pre tag. The css solution is nicer though so only use pre if you really have 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 simple html in your table cells, plus pre generally comes with it’s own default styling which you can get around with the following in CSS:

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

Using inherit can be slightly less supported, so if you can it is best to actually define the style you want directly.