Search code examples
htmlcsscss-tables

How do I "smarten" my HTML/CSS tables so text fits to one line (cleverly)

I have a CSS table which is reused throughout my code. The size of the data, and the number of columns for the table varies every time the table is used. The max width (set by CSS) for the table is 80% of page. However, Sometimes when the table has a little data (maybe extending table to 50% of the page) some lines of text will separate into two lines. How to I counteract this, so the table uses all the space available to it.

This is what happens at the moment:

Problem

I've tried setting the manual width for the table, but that means the table remains stretched even when the table width only needs to be small.

I've also tried using CSS white-space:nowrap; However this cause the table to extend beyond 80% if there is a lot of data in one column.

Anyway to solve these two problems with CSS?

Solution

  • Just use this css:

    td
{
white-space: nowrap; overflow: hidden; text-overflow:ellipsis;
}​

    And the result is like this: http://jsfiddle.net/ongisnade/pghny/