How to limit table cell width in HTML when it has white space: nowrap?

Question

I have a table cell for which I would like to have the following effects:

width: 100px; white-space: nowrap; overflow: hidden; 

In other words, a cell should always be a single line of text (its contents are guaranteed to contain plain text without HTML markup), it should be no more than 100 pixels, and if the text is longer, it must be cut off.

Unfortunately, when the text becomes long, the cell is still stretched. Tested in IE and FF, both of which relate to my target browsers.

The suggestion to add a <div> inside the cell and set the width for this is difficult. The table is created from the gridview control and simply adds the specified column width to the <td> element and inserts the text as is.

Answer 1

You can set max-width:100px . Real-time example: http://jsfiddle.net/tw16/RuAVq/

 td{ width: 100px; max-width: 100px; /* add this */ white-space: nowrap; overflow: hidden; } 

The problem, as a rule, in IE does not support this.

Another solution supported by IE is to use float:left . Real-time example: http://jsfiddle.net/tw16/RuAVq/1/

 td{ width: 100px; float: left; /* add this */ white-space: nowrap; overflow: hidden; }