How can I use ellipses in a fluid width table without making each column the same size?

Question

Let's say my columns in a table are id, name, description, and phone. The description column is 1-255 characters, but the id is only max 3 characters.

I'd like the columns to be appropriately sized rather than each column being the same size. And I'd like the description column to overflow to an ellipsis when the window is too small to fit the contents in its entirety.

table-layout:fixed; is the standard way to make text-overflow: ellipsis; work, but it resizes all the columns to the same size. I'd prefer to keep the widths auto rather than fixed.

Can you help?

Here's my jsFiddle: http://jsfiddle.net/RQhkk/1/

Here's a screenshot of what I'm dealing with:

Notice how Table 1 makes all columns the same size? That's awful.

Notice how Table 2 sizes the columns based on content? That's good. Except when the content is too long: Table 3. Then it doesn't fit. In that case I'd like it to overflow to an ellipsis.

And here's my html table and css code:

<div id="t1">
<table>
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th class="ellipsis">description</th>
            <th>phone</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>alpha</td>
            <td class="ellipsis">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            <td>555-555-5555</td>
        </tr>
        <tr>
            <td>2</td>
            <td>beta</td>
            <td class="ellipsis">Sed et nulla neque.</td>
            <td>555-555-5555</td>
        </tr>
        <tr>
            <td>3</td>
            <td>gamma</td>
            <td class="ellipsis">Morbi imperdiet neque ut lorem rhoncus fermentum.</td>
            <td>555-555-5555</td>
        </tr>
    </tbody>
</table>
</div>

<style>
#t1 table {
    table-layout:fixed;
    width:100%;
}
#t1 td {
    white-space: nowrap;
}
#t1 td.ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
}
</style>

If I remove the table-layout: fixed; the column widths are what you'd expect - sized to the content. Unfortunately I just can't get the ellipsis to work without the fixed layout. Where am I going wrong?

Answer 1

It should work if you specify a max-width for td.ellipsis.