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

You can use:

td {
  white-space: nowrap;
}