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?

score 61 · Accepted Answer · edited Aug 24 '17 at 19:52

61

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/

edited Aug 24 '17 at 19:52

mbomb007

3,788
3
39
68

answered Jun 13 '13 at 00:32

gustavohenke

40,997
14
121
129

3

Thank you very much! can't believe it was that simple. – solarc Jun 13 '13 at 00:43
Thank you was completely stuck until running into this answer. – shell Mar 05 '17 at 19:51
1

This works with `width` but not with `max-width`. :( – new name Oct 30 '20 at 13:51

CSS percentage width and text-overflow in a table cell

1 Answers1

Linked