HTML-таблица фиксированной ширины только с одним адаптирующимся столбцом

Question

Как создать таблицу из двух столбцов HTML, в которой первый столбец принимает только необходимую ему ширину, а второй - до фиксированной общей ширины таблицы? Таким образом, изменение содержимого второго столбца не приводит к перебалансированию пространства между первым и вторым столбцами без назначения фиксированной ширины первому столбцу.

Answer 1

Вы можете использовать

td:first-child + td { width: 100%; }

в CSS. Это работает в современных браузерах. Старые версии IE (до IE 6) не понимают «продвинутые» селекторы, используемые здесь; для них вы можете использовать

<col><col width="100%">

в HTML (это не вредит современным браузерам), после тега <table> и перед строками таблицы.

Понятие «нужная ширина» несколько двусмысленно, если ячейка содержит пробелы или иным образом может быть разбита на две или более строки. Ячейке с «foo bar» нужно больше места, если «foo» и «bar» должны оставаться на одной линии. По умолчанию браузеры могут разделять их. Вы можете предотвратить это в CSS, сказав

td:first-child { white-space: nowrap; }

Answer 2

Просто добавьте

style="width: 100%"

В ячейку таблицы, которую вы хотите расширить.