CODEWITHSUNDEEP
htmlcsshtml-table
cmann
cmann

Reputation: 1980

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?

Upvotes: 1

Views: 13654

Answers (3)

Brian
Brian

Reputation: 21

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

Upvotes: 2

David Thomas
David Thomas

Reputation: 253396

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).

Upvotes: 0

Sean
Sean

Reputation: 141

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

Upvotes: -1

Related Questions