Як не допустити розриву рядків у стовпці комірки таблиці (не однієї комірки)?

170

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

html css layout

— Стівен
джерело

1

Виберіть відповідь! ... пізно зараз я гадаю

— Jaeeun Lee

258

Ви можете використовувати пробіл у стилі CSS:

white-space: nowrap;

— Девід М
джерело

4

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

— Стівен

11

Так додати його до кожної комірки стовпця?

— Девід М

Додайте клас до кожної комірки td, до якої ви хочете, щоб це стосувалося, якщо ви не хочете, щоб він застосовувався до кожної комірки таблиці, а лише до конкретної.

— Джеймс Блек

Я хочу застосувати його до всіх комірок одного стовпця.

— Стівен

7

Ви можете застосувати це правило разом із п’ятою

— Zach Lysobey

36

Для завершення:

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

Використовується для застосування стилю до 2 стовпця the table_idтаблиці.

Це підтримується всіма основними браузерами, IE почав підтримувати це з IE9.

— естані
джерело

19

Використовуйте стиль норапа:

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

Це CSS!

— Дерек Ільчук
джерело

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

— Стівен

17

Просто додайте

style="white-space:nowrap;"

Приклад:

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

— Харун або Рашид
джерело

Чи це не стосується всієї таблиці (тобто ВСІ стовпців), а не лише окремого стовпця?

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

15

Є кілька способів зробити це; жоден з них не є простим, очевидним способом.

Застосування пробілів: nowrap до значка не <col>буде працювати; лише чотири властивості CSS працюють на <col>елементах - кольорі фону, ширині, межі та видимості. IE7 і раніше використовувались для підтримки всіх властивостей, але це тому, що вони використовували дивну модель таблиці. IE8 зараз відповідає всім іншим.

Отже, як ви це вирішите?

Ну, якщо ви можете ігнорувати IE (включаючи IE8), ви можете використовувати :nth-child()псевдоклас для вибору конкретних <td>s з кожного рядка. Ви б використали td:nth-child(2) { white-space:nowrap; }. (Це працює для цього прикладу, але буде зламано, якби у вас були залучені будь-які шпари або кольца.)

Якщо вам доведеться підтримувати IE, вам доведеться пройти довгий шлях і застосувати клас до кожного, на <td>який ви хочете вплинути. Це смокче, але вони перерви.

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

— Ксантір
джерело

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) -простору.

— Роджер Кіс
джерело

5

Щоб застосувати його до всієї таблиці, ви можете розмістити її в tableтезі:

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

— ОльгаМакашек
джерело