Ширина ячейки таблицы ограничивается самым длинным словом — как убрать ограничение?

Question

[zencd]

Есть HTML-таблица, ширину колонок задает пользователь. Реализуется это присвоением ширины элементу TH. При этом пробегать скриптом все многочисленные ячейки колонки не хочется.

Проблема: ширина колонки ограничивается самым длинным словом в любой из ячеек. Дальше уменьшить её нельзя.

Вопрос: можно ли CSS'ом устранить это ограничение, без JS? (Перенос слова, сокрытие части - всё подойдёт.)

https://jsfiddle.net/zencd/4so75ywm/12/

Answer 1

[Татьяна С]

Может быть поможет table-layout: fixed;?
Только при его использовании надо обязательно указывать ширину для table.

Answer 2

[Сергей Лещенко]

Не знаю правильно ли я понял постановку вопроса.
Можно добавить скролл overflow-x: scroll;
или перенос word-wrap: break-word;

Comments

[zencd]

Не помогает: https://jsfiddle.net/zencd/4so75ywm/16/

[Сергей Лещенко]

Вы пишите стили для td а большая строка находится в th

[zencd]

Сергей Лещенко, с th всё хорошо, проблема в td, которая мешает ужаться колонке

[alexalexes]

Да, забыл указать, что для всей таблицы нужно свойство table-layout: fixed; при этом обязательно указывать ширину, иначе такое указание не имеет смысла, как писал пользователь Татьяна С.
В CSS много всяких зависимостей свойств, мало наобум подставить одно свойство для контейнера, нужно убедиться, что у родительского контейнера должны еще кое-какие свойства, что косвенно влияют на отображение дочерних элементов.

https://jsfiddle.net/4so75ywm/34/

Answer 3

[alexalexes]

Даже нужно использовать CSS.
Попробуйте для ячеек таблицы вот такие свойства:
htmlbook.ru/css/word-wrap
htmlbook.ru/css/text-overflow

PS: При верстке, вообще, нужно максимально использовать возможности CSS.
Есть что-то нельзя добиться CSS стилями, то поправку стилей возможно делать через JS, но это путь к костылям.

Comments

[zencd]

Нужно-то нужно, но пока что от ЦСС толку нет: https://jsfiddle.net/zencd/4so75ywm/22/

Answer 4

[Монти Пайтон]

Можно ещё вставить троеточие:



При наведении мышкой сделайте псевдоклассом чтобы показывалось остальное