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.
- Give the middle column
th
amax-width
andmin-width
instead ofwidth
- Give the left and right
th
awidth
of50%
. - Don't give the
table
awidth
at all.
I have fixed this examples middle column width
at 300px
.
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.
Post a Comment for "Table With 3 Columns. Fixed Center Column Width. How To Have Shared Width On Other Two Columns?"