In HTML Table how do you force cell text to truncate and not increase the width of the cell or wrap

Question

I have tried a number of CSS style settings, but can't seem to get it working, I either get the text to wrap or increase the size of the column.

I have tried setting table-layout to fixed

table { table-layout:fixed; }

Have tried various different combinations for the column.

Name { width: 100px; overflow:hidden; white-space:nowrap; }

Answer 1

Set a width on the entire table as well. The width can be set as a percentage, in pixels, or in other units. You might think that it suffices to set the width of each column, or the width of each cell in the first row, but for some odd reason it doesn’t.

Fixed layout for tables has many quirks and oddities, and one of them is that if content does not fit, the column gets wider, unless the total width of the table has been set. This seems to happen so consistently in browsers that one might even think it’s part of the specs (but it isn’t, as far as I can see).

If you want to set fixed width (with truncation when needed) for some column(s) without setting the total width, I’m afraid you need a workaround like <td><div>...</div></td> with the width and overflow properties set on the div element.

Answer 2

Is this what you're looking for?

http://jsfiddle.net/PW6Bg/

Answer 3

You can set the <td>'s width to a fixed value.

Also, please do a bit of research, this question was asked many times :)