So I have a table with this style:
table-layout: fixed;
Which makes all columns to be of the same width. I would like to have one column (the first one) to be wider and then rest of the columns to occupy the remaining width of the table with equal widths.
How to achieve that?
jsfiddle: http://jsfiddle.net/6p9K3/
Notice the first column, I want it to be 300px
wide.
You could just give the first cell (therefore column) a width and have the rest default to auto
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #000;
width: 150px;
}
td+td {
width: auto;
}
<table>
<tr>
<td>150px</td>
<td>equal</td>
<td>equal</td>
</tr>
</table>
or alternatively the "proper way" to get column widths might be to use the col
element itself
table {
table-layout: fixed;
border-collapse: collapse;
width: 100%;
}
td {
border: 1px solid #000;
}
.wide {
width: 150px;
}
<table>
<col span="1" class="wide">
<tr>
<td>150px</td>
<td>equal</td>
<td>equal</td>
</tr>
</table>