I'm trying to create a table adhering to the following requirements:

1. The table width must be defined as 0 - the browser should calculate the width according to the column widths (this is to accommodate a column-resize plugin).
2. Some columns may receive a fixed width (e.g. 50px);
3. Columns that do not receive a fixed width, must auto-fit to the content.

I have created a small example to illustrate the problem - as you can see column 3 stays at width 0 and so is not visible.

HTML

<table>
<tr>
    <td class="cell header" id="header1">Header 1</td>
    <td class="cell header" id="header2">Header 2</td>
    <td class="cell header" id="header3">Header 3</td>
</tr>
<tr>
    <td class="cell">Cell 1</td>
    <td class="cell">Cell 2</td>
    <td class="cell">Very looooong content</td>
</tr>
</table>

CSS

table {
    table-layout: fixed;
    width: 100%;
    border: 1px solid #696969;
}

.cell {
    color: #898989;
    border: 1px solid #888;
    padding: 2px;
    overflow: hidden;
}

.header {
    background-color: lightsteelblue;
    color: black;
}

#header1, #header2 {
    width: 50px;
}

Is this even possible? Any help would be appreciated...

?