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

170

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

html css layout

— Стивен
источник

1

Пожалуйста, выберите ответ! ... слишком поздно, я полагаю

— Jaeeun Lee

258

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

white-space: nowrap;

— Дэвид М
источник

4

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

— Стивен

11

Так добавить это в каждую ячейку в столбце?

— Дэвид М

Добавьте класс к каждой ячейке td, к которой вы хотите, чтобы это применялось, если вы не хотите, чтобы он применялся ко всем ячейкам таблицы, а только к конкретным.

— Джеймс Блэк

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

— Стивен

7

Вы можете применить это правило вместе с n- ным

— Зак Лисобей,

36

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

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

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

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

— estani
источник

19

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

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

Это CSS!

— Дерек Илчук
источник

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

— Стивен

18

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

style="white-space:nowrap;"

Пример:

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

— Харун Или Рашид
источник

Не будет ли это относится ко всей таблице (т.е. ВСЕХ столбцов) , а не только отдельный столбец?

— Джошуа Пинтер

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; }и он будет делать то, что вы хотите.

— Xanthir
источник

13

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

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

— Дэн Брин
источник

6

<table class="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: 3px 2px;
        text-align: left;
    }
</style>

Это пример использования свойства пробела со значением nowrap, bluetable - это класс таблицы, под таблицей - стили CSS.

— Матову Рональд
источник

5

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

— Роджер Кис
источник

5

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

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

— OlgaMaciaszek
источник