Как предотвратить текст в ячейке таблицы от упаковки

Question

Кто-нибудь знает, как я могу предотвратить перенос текста в ячейке таблицы? Это для заголовка таблицы, и заголовок намного длиннее данных под ним, но мне нужно, чтобы он отображался только на одной строке. Это нормально, если колонка очень широкая.

HTML-мой (упрощенный) таблицы выглядит следующим образом:

<table> 
    <thead> 
    <tr> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
     <th> 
     <div>Really long column heading</div> 
     </th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
     <td> 
     <div>data</div> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Сам заголовок заворачивают в DIV внутри тега th по причинам, относящимся к JavaScript на этой странице.

Стол выходит с заголовками, обертывающими на несколько строк. Это происходит, только когда таблица достаточно широкая, поскольку браузер пытается избежать горизонтальной прокрутки. В моем случае, однако, я хочу горизонтальную прокрутку.

Любые идеи?

Answer 1

Посмотрите на недвижимость white-space, которая используется следующим образом:

th { 
    white-space: nowrap; 
} 

Это заставит содержимое <th> отобразить на одной строке.

От связанной страницы, вот различные варианты для white-space:

нормальный
Это значение направляет ПАгенту разрушаться последовательности белого пространства, и разрыв строки, сколько необходимо для заполнения коробки строки.

предварительно
Это значение предотвращает пользовательские агенты от разрушения последовательностей белого пространства. Линии только сломаны при сохранении символов новой строки.

Nowrap
Это значение сворачивает пробельные как для «нормальной», но подавляет разрывы строк в тексте.

предварительно обертка
Это значение предотвращает пользовательские агенты от разрушения последовательностей белого пространства. Строки разбиты на сохраненные символы новой строки и, если необходимо, заполнять линейные поля.

предварительно линии
Это значение направляет пользовательские агенты разрушаться последовательности пустого пространства. Строки разбиты на сохраненные символы новой строки и, если необходимо, заполнять линейные поля.

Answer 2

Есть по крайней мере два способа сделать это:

Использования Nowrap атрибутов внутри "ТД" метка:

<th nowrap="nowrap">Really long column heading</th> 

Используйте неразрывное пространство между вашими словами:

<th>Really&nbsp;long&nbsp;column&nbsp;heading</th> 

Answer 3

<th nowrap="nowrap"> 

или

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

или

<th class="nowrap"> 
<style type="text/css"> 
.nowrap { white-space: nowrap; } 
</style> 

Answer 4

Я пришел на этот вопрос нуждающегося, чтобы предотвратить перенос текста на дефис.

Это, как я это сделал:

<td><nobr>Table Text</nobr></td> 

Ссылка:

How to prevent line break at hyphens on all browsers