CSS percentage width and text-overflow in a table cell

Question

I have a table where the cells' width is in percentage and I want to use text-overflow: ellipsis to hide long lines of text:

http://jsfiddle.net/Fm5bM/

In the example the ellipsis works fine in a div but not in the cell. It still grows and ignores both width:60% and max-width:60%.

If I add a display:block to the cell, the text does stop at 60% and gets the ellipsis, but the total width of the cell is still the size of the whole text.

http://jsfiddle.net/Fm5bM/3/

Ultimately, I want the table to fit the screen. Is there a way to do it with pure css?

Answer 1

This is easily done by using table-layout: fixed, but "a little tricky" because not many people know about this CSS property.

table {
  width: 100%;
  table-layout: fixed;
}

See it in action at the updated fiddle here: http://jsfiddle.net/Fm5bM/4/