HTML | Таблица со столбцами, размер которых соответствует содержимому И столбцы, которые расширяются

Question

В следующей таблице я хочу, чтобы первый столбец и последний столбец (столбцы идентификатора и флажка) были равны по размеру их содержимому. Обратите внимание, что оба эти столбца шире, чем их содержание. Я хочу, чтобы они тщательно оценивали содержание.

Я хочу, чтобы центральные столбцы (исходный и целевой) расширились, чтобы занять оставшуюся ширину таблицы, но они должны иметь одинаковую ширину. Ширина источника всегда должна равняться целевой ширине.

Я знаю, что могу установить размер первого и последнего столбца, который должен быть зафиксирован в пикселях, но я хочу избежать этого, если это возможно.

Мой код выглядит примерно так (без стилей):

<table>
  <thead>
    <tr>
      <th>
      </th>
      <th>
        Source
      </th>
      <th>
        Target
      </th>
      <th>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        0
      </td>
      <td>
        hello
      </td>
      <td>
      </td>
      <td>
        <input type="checkbox" />
      </td>
    </tr>
  </tbody>
</table>

Answer 1

Вы можете просто установить вашу таблицу на 100% ширины, но определить столбцы, для которых ширина должна оставаться только размером, поскольку ее содержимое равно 1% ширины. Это заставляет этот столбец занимать не менее 1%, но будет расширяться до размера содержимого.

Чтобы обеспечить одинаковую ширину средних столбцов, разделите оставшиеся 98% между двумя. Так что установите каждый на 49%:

table {
  width: 100%;
  border-collapse: collapse;
}

table,
td {
  border: 1px solid black;
}

.fit {
  width: 1%;
}

.even {
  width: 49%;
}

<table>
  <tr>
    <td class="fit">1</td>
    <td class="even">Content column 2</td>
    <td class="even">Content column 3</td>
    <td class="fit"><input type="checkbox"></td>
  </tr>
  <tr>
    <td class="fit">2</td>
    <td class="even">Content column 2</td>
    <td class="even">Extended content column 3</td>
    <td class="fit"><input type="checkbox"></td>
  </tr>
  <tr>
    <td class="fit">3</td>
    <td class="even">Content column 2</td>
    <td class="even">Even more extended content column 3</td>
    <td class="fit"><input type="checkbox"></td>
  </tr>

</table>