Table With 3 Columns. Fixed Center Column Width. How To Have Shared Width On Other Two Columns?

i have a 100% width table with 3 columns. The center column must be 600px width. How can I have the other two equal width while using up the remaining space?

Solution 1:

New answer to this old question.

1. Give the middle column th a max-width and min-width instead of width
2. Give the left and right th a width of 50%.
3. Don't give the table a width at all.

I have fixed this examples middle column width at 300px.

jsBin Example!

CSS

table {
    border-collapse: collapse;
}
th, td {
    border: solid 1px#CCC;
    padding: 10px;
}
.fixed {
    max-width: 300px;
    min-width: 300px;
}
.fluid {
        width: 50%;
}

HTML

<table><thead><tr><thclass="fluid">First Column</th><thclass="fixed">Fixed Column</th><thclass="fluid">Third Column</th></tr></thead><tbody><tr><td></td><td></td><td></td></tr></tbody></table>

Solution 2:

The use of "colgroup" tag could be a great help for this.

<tableclass="fixed-center-table"border="1"><thead><colgroup><col><colid="middle-column"><col></colgroup><tr><th>First Column</th><th></th><th>Third Column</th></tr></thead><tbody><tr><td>AAAAAA</td><td>BBBB</td><td>CCCCC</td></tr><tr><td>AAAAAA</td><td>BBBB</td><td>CCCCC</td></tr><tr><td>AAAAAA</td><td>BBBB</td><td>CCCCC</td></tr></tbody></table>

.fixed-center-table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
}

.fixed-center-table  td{
   text-align: center;
}

col#middle-column {
   width: 600px;
}

Solution 3:

I guess "align=center" used with center column may help you.