Table with no wrap, one column with overflow and as big as possible

Question

I have a fixed-width table of 400px with 3 columns.

<table>
    <tbody>
        <tr>
            <td class="wide">This is really really long and as much as possible should show but should eventually be cut off.</td><td class="narrow">Small1</td><td class="narrow">Small2</td></tr>
    </tbody>
</table>

Here is the CSS.

table
{
    table-layout: fixed;
    width: 400px;
}
td
{
    border: 1px solid #000;
    white-space: nowrap;
}
td.wide
{
    overflow: hidden;
    text-overflow: ellipsis;
}
td.narrow
{
}

Here is the JSFiddle.

Currently, each of the 3 columns takes up 1/3 of the space. What I want is for the 2nd and 3rd columns to be as small as possible (without anything hidden or text-wrapped) and have the 1st column take up the remainder of the space (with any text that doesn't fit being hidden).

Depending on the data displayed, the 2nd and 3rd columns may need to be wider or narrower to fit their content, so I don't want to define a fixed size for any column.

Is this possible?

Answer 1

Here is the only solution i found. It's pretty ugly but it does the trick :

http://jsfiddle.net/XA9kY/

The thing is to wrap the string to be overflowing into a .... table

---

Notice the table into the td.wide

<div style="width:400px; border: 1px solid red;">
    <table>
        <tbody>
            <tr>
                <td class="wide">
                    <table>
                        <tr>
                            <td>This is really really long and as much as possible should show but should eventually be cut off.
                            </td>
                        </tr>
                    </table>
                </td>
                <td class="narrow">Small1</td>
                <td class="narrow">Small2</td>
            </tr>
        </tbody>
    </table>
</div>

---

And here is the magic

td.wide table
{
    width: 100%;
    table-layout: fixed;
}
td.wide table td
{
    overflow: hidden; 
    white-space: nowrap; 
    text-overflow: ellipsis;
}

Just wrapping the string into a table with table-layout: fixed; property does the trick.