HTML-ширина столбца автоматически игнорирует перенос текста

Question

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

Таблицы имеют фиксированную ширину (ширина:45% в CSS), имеют одинаковую длину содержимого ячеек и, за одним исключением, одинаковые заголовки. Насколько я понимаю, именно заголовок определяет ширину столбца. Чего я не понимаю, так это того, что он игнорирует упаковку.

Первая таблица содержит:

<th>column1</th>
<th>longerword</th>
<th>column3</th>

и вторая таблица:

<th>column1</th>
<th>short word</th>
<th>column3</th>

"короткое слово" оборачивается и поэтому фактически короче "длинного слова", но столбец намного шире, что кажется нелогичным и тратит пространство.

Есть ли способ использовать ширину обернутого текста, чтобы установить ширину столбца?

Кроме ширины таблицы и некоторого отступа, у меня нет форматирования, которое могло бы повлиять на размер / положение / интервал

Answer 1

Если ширина столбца меньше длины слова, то по умолчанию слова переносятся. Самое простое решение - использовать css и форсировать без переноса:

<th style="white-space: nowrap;">short word</th>

или же

<style> th {white-space: nowrap;} </style>