100% width table, one column flexible size and truncate text on window/parent resize?

Question

I have a table within a div that is absolutely positioned on my page. Something like (left: 50px; right: 50px; etc).

The first column values can be quite lengthy, but the rest are pretty much a static width. I would like to set the second, third, etc columns to a specific width and have the first column automatically resize. However, I want it to resize even if it would truncate the text (ie I always want the other columns to show). Currently this doesn't happen. It pushes the right columns out of the div.

Here is a fiddle: http://jsfiddle.net/pdtLoy6d/2/ You can reproduce by resizing the right fiddle pane.

<table>
    <col width="auto" />
    <col width="80px" />
    <col width="150px" />
    <tr>
        <td>This is a thing it could be a really really really long string and I want it to truncate</td>
        <td>Thing2</td>
        <td>That thing is always short</td>
    </tr>
    <tr>
        <td>Not sure if it matters, but these rows are all dynamically generated</td>
        <td>Thing2</td>
        <td>test</td>
    </tr>
</table>

table {
    width: 100%;
    border: 1px solid gray;
    border-collapse: collapse;
}
td { 
    border: 1px solid gray;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

[Just add `table-layout: fixed;` to the table](http://jsfiddle.net/pdtLoy6d/4/). — Hashem Qolami, Mar 30 '15 at 16:31
I think my question is much more detailed and the answer posted by @sdcr is much more concise, but whatever... — , Mar 30 '15 at 16:33

score 3 · Accepted Answer · answered Mar 30 '15 at 16:31

3

Is this what you're looking for?

http://jsfiddle.net/pdtLoy6d/3/

table {
    table-layout: fixed; /*added*/
}

answered Mar 30 '15 at 16:31

Stickers

75,527
23
147
186

That's exactly what I was missing. Thanks! – Mar 30 '15 at 16:32

100% width table, one column flexible size and truncate text on window/parent resize?

1 Answers1