Three column HTML table layout with a main column

I have a 3 column table with the main content displayed in the middle content.

开发者_如何转开发 All three column's widths are flexible but the middle column width must take priority.

Is there a way to do this?

<table>
    <tr>
        <td id="left">Some content</td>
        <td id="center">Center content</td>
        <td id="right">Right content</td>
    </tr>
    <tr>
        <td style="white-space: nowrap">Some content</td>
        <td style="width:90%">Center content</td>
        <td style="white-space: nowrap">Right content</td>
    </tr>
</table>

This seems to work well for me. It uses no wrap to force the small columns to expand beyond the 5% each column is given and gives the rest of the space to the middle column.

This seems relatively simple, so I might well be missing something, but given the following html:

html:

<table>
    <tr>
        <td id="left">Some content</td>
        <td id="center">Center content</td>
        <td id="right">Right content</td>
    </tr>
    <tr>
        <td>Some content</td>
        <td>Center content</td>
        <td>Right content</td>
    </tr>
</table>

and css:

table {
    border-collapse: collapse;
    width: 90%;
    border: 1px solid #ccc;
}

#center {
    width: 70%;
}

The key to this working is the defined width on the table itself, and then on the td of id="center" (and tables apply a consistent width to all cells in the same 'column', and height of cells in the same 'row', unless colspan or rowspan forces different behaviour). JS Fiddle demo at: http://jsfiddle.net/davidThomas/hJZ6Q/.

The 'columns' (defined by #left and #right) are left without an explicit width, which causes the browser to assign an equal width to both, in this case that's about 15% of the width of the table. You can, of course, assign a width of whatever unit you want to the 'columns', so long as the total fits within the assigned width of the table itself (as negative numbers are invalid for table widths, and assigning such a number will cause the browser to disregard the width, and simply work with whatever valid widths remain).

I suggest you take a look at Perfect 3 Column Layout It's a liquid layout and sounds like what you are looking for.