CODEWITHSUNDEEP
csscss-tables
Mike U
Mike U

Reputation: 3061

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

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; }

Upvotes: 1

Views: 3456

Answers (3)

Jukka K. Korpela
Jukka K. Korpela

Reputation: 201658

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.

Upvotes: 2

Sagar Patil
Sagar Patil

Reputation: 1948

Is this what you're looking for?

http://jsfiddle.net/PW6Bg/

Upvotes: 1

Silver Quettier
Silver Quettier

Reputation: 2050

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

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

Upvotes: -1

Related Questions