CODEWITHSUNDEEP
htmlcsshtml-tableoverflow
Don P
Don P

Reputation: 63788

How can I hide overflow in a <td>?

I have a table. Its <td> have overflow: hidden. When I have a string that is longer than 100px, it is not hidden.

How can I hide content when it exceeds the width of its <td> container?

http://jsfiddle.net/be6tM/

Upvotes: 2

Views: 516

Answers (2)

Ry-
Ry-

Reputation: 225291

The default behaviour is just to wrap the text, since height is no issue! You can disable text wrapping, though, with white-space: nowrap.

Because tables are a bit of a special case, however, you then need to use max-width instead of width (which is just a “preferred width”). Here’s your updated jsFiddle.

td {
    border: 1px solid rgb(0,0,0);
    max-width: 100px;
    overflow: hidden;
    white-space: nowrap;
}

Upvotes: 4

Jonathan Wood
Jonathan Wood

Reputation: 67355

There is no overflow. Set the height in order to restrict the height of the cell, then anything that uses up more vertical space than that should overflow.

Upvotes: 2

Related Questions