it-swarm.com.ru

Как предотвратить разрыв строки в столбце ячейки таблицы (не одной ячейки)?

Как я могу предотвратить автоматические разрывы строк в столбце таблицы (не одной ячейке)?

145
Steven

Вы можете использовать пустое пространство в стиле CSS:

white-space: nowrap;
224
David M

Ради завершения:

#table_id td:nth-child(2)  {white-space: nowrap;}

Используется для применения стиля к столбцу 2 таблицы the table_id.

Это поддерживается всеми основными браузерами, IE начал поддерживать это начиная с IE9 и далее.

34
estani

Используйте стиль nowrap:

<td style="white-space:nowrap;">...</td>

Это CSS!

18
Derek Illchuk

Есть несколько способов сделать это; ни один из них не является простым, очевидным способом.

Применение пробела: nowrap к <col> не будет работать; только четыре свойства CSS работают с элементами <col> - цвет фона, ширина, границы и видимость. IE7 и более ранние версии поддерживали все свойства, но это потому, что они использовали странную табличную модель. IE8 теперь соответствует всем остальным.

Итак, как вы решаете это?

Что ж, если вы можете игнорировать IE (включая IE8), вы можете использовать псевдокласс :nth-child() для выбора конкретных <td> из каждой строки. Вы бы использовали td:nth-child(2) { white-space:nowrap; }. (Это работает для этого примера, но сломалось бы, если бы у вас были какие-либо строки или colspans.)

Если вам нужно поддерживать IE, то вам придется пройти долгий путь и применить класс к каждому <td>, на который вы хотите повлиять. Это отстой, но это перерывы.

В конечном счете, есть предложения по устранению этого недостатка в CSS, чтобы вы могли легче применять стили ко всем ячейкам в столбце. Вы сможете сделать что-то вроде td:nth-col(2) { white-space:nowrap; }, и это будет делать то, что вы хотите.

15
Xanthir
<td style="white-space: nowrap">

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

11
Dan Breen

Поместите неразрывные пробелы в ваш текст вместо обычных пробелов. В Ubuntu я делаю это с помощью (Compose Key) -space-space.

5
Roger Keays

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

style="white-space:nowrap;"

Пример:

<table class="blueTable" style="white-space:nowrap;">
   <tr>
      <td>My name is good</td>
    </tr>
 </table>
5
Harun Or Rashid

Чтобы применить его ко всей таблице, вы можете поместить его в тег table:

<table style="white-space:nowrap;">

4
OlgaMaciaszek