Итак, у меня есть таблица с этим стилем:
table-layout: fixed;
Что делает все столбцы одинаковой ширины. Я хотел бы, чтобы один столбец (первый) был более широким, а затем остальным столбцом занимал оставшуюся ширину таблицы с одинаковой шириной.
Как это сделать?
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>