Я хочу предотвратить разрыв строки в столбце таблицы, а не в одной ячейке.
Стивен
11
Так добавить это в каждую ячейку в столбце?
Дэвид М
Добавьте класс к каждой ячейке td, к которой вы хотите, чтобы это применялось, если вы не хотите, чтобы он применялся ко всем ячейкам таблицы, а только к конкретным.
Джеймс Блэк
Я хочу применить его ко всем ячейкам одного столбца.
Не будет ли это относится ко всей таблице (т.е. ВСЕХ столбцов) , а не только отдельный столбец?
Джошуа Пинтер
15
Есть несколько способов сделать это; ни один из них не является простым, очевидным способом.
Применение пробела: теперь <col>не работает; только четыре свойства CSS работают с <col>элементами - background-color, width, border и visibility. IE7 и более ранние версии поддерживали все свойства, но это потому, что они использовали странную табличную модель. IE8 теперь соответствует всем остальным.
Итак, как вы решаете это?
Хорошо, если вы можете игнорировать IE (включая IE8), вы можете использовать :nth-child()псевдокласс для выбора определенных <td>s из каждой строки. Вы бы использовали td:nth-child(2) { white-space:nowrap; }. (Это работает для этого примера, но сломалось бы, если бы у вас были какие-либо строки или colspans.)
Если вам нужно поддерживать IE, то вам придется пройти долгий путь и применить класс ко всем, на <td>что вы хотите повлиять. Это отстой, но это перерывы.
В конечном счете, есть предложения по устранению этого недостатка в CSS, чтобы вы могли легче применять стили ко всем ячейкам в столбце. Вы сможете сделать что-то вроде, td:nth-col(2) { white-space:nowrap; }и он будет делать то, что вы хотите.
<tableclass="blueTable"><tr><td>My name is good</td></tr></table><style>
table.blueTable td,
table.blueTable th {white-space: nowrap;/* non-question related further styling */border:1px solid #AAAAAA;padding:3px2px;text-align: left;}</style>
Это пример использования свойства пробела со значением nowrap, bluetable - это класс таблицы, под таблицей - стили CSS.
Ответы:
Вы можете использовать пустое пространство в стиле CSS:
источник
Ради завершения:
Используется для применения стиля к 2 столбцу
the table_id
таблицы.Это поддерживается всеми основными браузерами, IE начал поддерживать это начиная с IE9.
источник
Используйте стиль nowrap:
Это CSS!
источник
Просто добавь
Пример:
источник
Есть несколько способов сделать это; ни один из них не является простым, очевидным способом.
Применение пробела: теперь
<col>
не работает; только четыре свойства CSS работают с<col>
элементами - background-color, width, border и visibility. IE7 и более ранние версии поддерживали все свойства, но это потому, что они использовали странную табличную модель. IE8 теперь соответствует всем остальным.Итак, как вы решаете это?
Хорошо, если вы можете игнорировать IE (включая IE8), вы можете использовать
:nth-child()
псевдокласс для выбора определенных<td>
s из каждой строки. Вы бы использовалиtd:nth-child(2) { white-space:nowrap; }
. (Это работает для этого примера, но сломалось бы, если бы у вас были какие-либо строки или colspans.)Если вам нужно поддерживать IE, то вам придется пройти долгий путь и применить класс ко всем, на
<td>
что вы хотите повлиять. Это отстой, но это перерывы.В конечном счете, есть предложения по устранению этого недостатка в CSS, чтобы вы могли легче применять стили ко всем ячейкам в столбце. Вы сможете сделать что-то вроде,
td:nth-col(2) { white-space:nowrap; }
и он будет делать то, что вы хотите.источник
nowrap
Атрибут я считаю , является устаревшим. Вышеуказанный способ является предпочтительным.источник
Это пример использования свойства пробела со значением nowrap, bluetable - это класс таблицы, под таблицей - стили CSS.
источник
Поместите неразрывные пробелы в ваш текст вместо обычных пробелов. В Ubuntu я делаю это с помощью (Compose Key) -space-space.
источник
Чтобы применить его ко всей таблице, вы можете поместить его в
table
тег:<table style="white-space:nowrap;">
источник