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?
table {
border-collapse: collapse;
width: 100%;
border: 1px solid black;
background: #ddd;
table-layout: fixed;
}
table th, table td {
border: 1px solid #000;
}
table td.wideRow, table th.wideRow {
width: 300px;
}
<table class="CalendarReservationsBodyTable">
<thead>
<tr>
<th colspan="97">Rezervovane auta</th>
</tr>
<tr>
<th class="corner wideRow">Auto</th>
<th class="odd" colspan="4">0</th>
<th class="" colspan="4">1</th>
<th class="odd" colspan="4">2</th>
<th class="" colspan="4">3</th>
<th class="odd" colspan="4">4</th>
<th class="" colspan="4">5</th>
<th class="odd" colspan="4">6</th>
<th class="" colspan="4">7</th>
<th class="odd" colspan="4">8</th>
<th class="" colspan="4">9</th>
<th class="odd" colspan="4">10</th>
<th class="" colspan="4">11</th>
<th class="odd" colspan="4">12</th>
<th class="" colspan="4">13</th>
<th class="odd" colspan="4">14</th>
<th class="" colspan="4">15</th>
<th class="odd" colspan="4">16</th>
<th class="" colspan="4">17</th>
<th class="odd" colspan="4">18</th>
<th class="" colspan="4">19</th>
<th class="odd" colspan="4">20</th>
<th class="" colspan="4">21</th>
<th class="odd" colspan="4">22</th>
<th class="" colspan="4">23</th>
</tr>
</thead>
<tbody>
<tr>
<td class="alignRight wideRow">KE-260 FC - Octavia combi</td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td colspan="16" class="highlighted borderLeft" title="Richard Knop">
Richard Knop
</td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td colspan="14" class="highlighted" title="Richard Knop">
Richard Knop
</td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
<td class=" borderLeft"></td>
<td class="odd"></td>
<td class=""></td>
<td class="odd"></td>
</tr>
</tbody>
</table>
See Question&Answers more detail:
os 与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…