Question

I am attempting to do a one line overflow on an element in a td when it’s contents exceed that of its parents when using relative widths.

 ┌─────────────────────────────────────────────────────────────────────┐
 |10%    60%                                       30%                 |
 |Left   Middle (This content should not exceed... Right               |
 |                                                                     |

This jsfiddle is what I’ve managed so far. A previous question received an answer that I thought would be a solution, however that doesn’t appear to work with % widths. I am looking for a CSS solution before resorting to a JavaScript work around.

Note: I don’t need an inner element, if CSS styling can be applied directly to the outer element that would be great also.

Many thank,

Thomas Nadin

Answer 1

You have to simply change

 table {
     width: 100%;
 }

to

 table {
     width: 100%;
     table-layout:fixed;
 }

and everything will work as you expect it to work. (see this jsfiddle)

All the magic lies in the table-layout:fixed; property, which defines that the table should be exactly as wide as you have defined it.

table-layout:fixed; is pretty well supported, except for IE/Mac (https://developer.mozilla.org/en/CSS/table-layout).

EDIT

I just read the question again, and saw that you want to drop the inner <div>. With this solution it’s possible, just drop it and apply the class overflow to the td.second (so you are flexible and can apply it also to multiple columns if you want to). See the result in this fiddle.