У первого столбца таблицы постоянная ширина, зависящая от наибольшей ширины ячейки в столбце

Question

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

Пример:

| Hello | This is a sentence         |
| Foo   | This is a longer sentence  |

Таким образом, первый столбец, содержащий ячейки Hello и Foo, будет иметь одинаковую ширину, но поскольку он имеет динамическое содержимое, я не хочу указывать ширину.

Answer 1

То, что вы описываете - это поведение по умолчанию. Ширина столбца соответствует размеру его содержимого по умолчанию. Если вы хотите предотвратить перенос слов в этих ячейках, установите white-space: nowrap;

Answer 2

Для достижения ожидаемого результата укажите границу таблицы, tr и td

По умолчанию ширина td подстраивается под содержимое ячейки

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

<table>
  <tr>
    <td>Hello</td>
    <td>This is a sentence</td>
  </tr>
  <tr>
    <td>Foo</td>
    <td>This is a longer sentence</td>
  </tr>
  <tr>
    <td>Foo................</td>
    <td>This is a longer sentence...........</td>
  </tr>
</table>

кодекс - https://codepen.io/nagasai/pen/JqGmrV