How to make HTML table cells expand horizontally beyond end of page?

Question

I have a table with many columns. The table is wider than the page, and so it scrolls. The default behaviour of tables seems to be to make the width of each column as small as possible, and allow text to spill over onto a new line.

I'd like instead for my table cells to grow horizontally with their contents, and never to spill over onto a second line. Is this possible using CSS? If not, does anyone have any pointers for how I might start to do this using Javascript (jQuery if poss)?

Answer 1

I think this might be what you want. http://geekswithblogs.net/TimH/archive/2006/04/16/75318.aspx

Using the

 white-space: nowrap;

will cause the cell to take up as much space as it needs.

Answer 2

You can use:

td {
  white-space: nowrap;
}