No wrap table, one overflow column and as many as possible

Question

I have a 400px fixed width table 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 occupies 1/3 of the space. I want the 2nd and 3rd columns to be as small as possible (without any hidden or wrapped text), and the first column takes up the rest of the space (with any text that is not suitable for hiding).

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 it possible?

Answer 1

, . , :

http://jsfiddle.net/XA9kY/

, , ... table

---

table 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>

---

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

table table-layout: fixed; .

Answer 2

: ()

<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="rest">Small1</td>
            <td class="rest">Small2</td>
        </tr>
    </tbody>
</table>

CSS

table {
    width: 400px;
}
table td {
    border: 1px solid #000;
}
td.rest {
    width:1px;
}

, :

overflow: hidden;
text-overflow: ellipsis;

, .

, .
​​ , , . ()

table {
    width: 400px;
}
table td {
    border: 1px solid #000;
    line-height:26px;
}
td.rest {
    width:1px;
    white-space: nowrap;
}
td.wide {
    overflow:hidden;
    height:26px;
    display:block;
}