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

Ответ 1

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

white-space: nowrap;

Ответ 2

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

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

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

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

Ответ 3

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

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

Это CSS!

Ответ 4

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

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

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

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

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

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

Ответ 5

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

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

Ответ 6

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

style="white-space:nowrap;"

Пример:

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

Ответ 7

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

Ответ 8

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

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

Ответ 9

<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.