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

Question

I've got a table cell for which I'd like to have the following effects:

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

In other words, the cell should always be a single line of text (its contents are guaranteed to contain plain text without HTML markup), it should be at most 100px wide, and if the text is longer, it should be clipped.

Unfortunately, when the text gets long, the cell still stretches. Tested in IE and FF, both of which are among my target browsers.

Suggestion to add a <div> inside the cell and set the width to that is difficult. The table is generated from a gridview control and that just adds the specified column width to the <td> element and inserts the text as-is.

Answer 1

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

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

The problem is, typically, IE doesn't support this.

Another solution, which is supported by IE, is to use float:left. Live example: http://jsfiddle.net/tw16/RuAVq/1/

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