Таблица с таблицей-макетом: исправлена; и как сделать одну колонку шире

Итак, у меня есть таблица с этим стилем:

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>

Ответы

Ответ 1

Вы можете просто указать первую ячейку (поэтому столбец) ширину и оставить по умолчанию значение 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>

Ответ 2

Важное значение table-layout: исправлено, что ширина столбца определяется первой строкой таблицы.

So

если ваша структура таблицы следующая (стандартная структура таблицы)

<table>
  <thead>
      <tr>
          <th> First column </th>
          <th> Second column </th>
          <th> Third column </th>        
      </tr>
  </thead>

   <tbody>
      <tr>
          <td> First column </td>
          <td> Second column </td>
          <td> Third column </td>        
      </tr>
  </tbody>

если вы хотите задать ширину для второго столбца, тогда

<style> 
    table{
        table-layout:fixed;
        width: 100%;
    }

    table tr th:nth-child(2){
       width: 60%;
     }

</style>

Пожалуйста, посмотрите, что мы стиль th, а не td.

Ответ 3

Создаете ли вы очень большую таблицу (сотни строк и столбцов)? Если это так, table-layout: fixed; - хорошая идея, так как браузеру нужно только прочитать первую строку, чтобы вычислить и отобразить весь table, поэтому он загружается быстрее.

Но если нет, я бы предложил сбросить table-layout: fixed; и изменить ваш css следующим образом:

table th, table td{
border: 1px solid #000;
width:20px;  //or something similar   
}

table td.wideRow, table th.wideRow{
width: 300px;
}

http://jsfiddle.net/6p9K3/1/

Ответ 4

Что вы можете сделать, это что-то вроде этого (псевдокод):

<container table>
  <tr>
    <td>
      <"300px" table>
    <td>
      <fixed layout table>

В принципе, разделите таблицу на две таблицы и сохраните ее в другой таблице.