Jak zapobiegać zawijaniu tekstu w komórce tabeli?

Question

Czy ktoś wie, w jaki sposób mogę zapobiec zawijaniu tekstu w komórce tabeli? To jest dla nagłówka tabeli, a nagłówek jest o wiele dłuższy niż dane pod nim, ale muszę go wyświetlić tylko w jednym wierszu. Jest w porządku, jeśli kolumna jest bardzo szeroka.

HTML mojego (uproszczony) tabeli wygląda następująco:

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

Sam nagłówek zawinięte w div wewnątrz th tagu z przyczyn dotyczących javascript na stronie.

Tabela wychodzi z nagłówkami opakowanymi na wiele linii. Wydaje się, że dzieje się tak tylko wtedy, gdy stół jest wystarczająco szeroki, ponieważ przeglądarka stara się unikać przewijania w poziomie. W moim przypadku jednak chcę przewijać w poziomie.

Wszelkie pomysły?

Answer 1

Spójrz na właściwość white-space, używaną w następujący sposób:

th { 
    white-space: nowrap; 
} 

Spowoduje to wymuszenie wyświetlania zawartości w jednej linii na <th>.

Od połączonej stronie, tutaj są różne opcje dla white-space:

normalny
Ta wartość nakazuje aplikacjom klienckim scalania sekwencji białej przestrzeni, i przełamać linie jako niezbędne do wypełnienia pól liniowych.

pre
Wartość ta zapobiega składaniu sekwencji białych spacji przez programy użytkownika. Linie są łamane tylko przy zachowanych znakach nowej linii.

nowrap
Wartość ta zapada spacje jako „normal”, ale wyłącza łamanie wierszy w tekście.

wstępnego owijania
Wartość ta zapobiega środki scalania sekwencji białych przestrzeni. Linie są łamane przy zachowanych znakach nowej linii i, jeśli to konieczne, w celu wypełnienia pól liniowych.

wstępnie linia
Wartość kieruje środki scalania sekwencji białych przestrzeni. Linie są łamane przy zachowanych znakach nowej linii i, jeśli to konieczne, w celu wypełnienia pól liniowych.

Answer 2

Istnieją co najmniej dwa sposoby, aby to zrobić:

Zastosowanie nowrap atrybutów wewnątrz "TD" tagu:

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

użytku innego niż łamliwe przestrzenie między swoimi słowami:

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

Answer 3

<th nowrap="nowrap"> 

lub

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

lub

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

Answer 4

doszedłem do tej kwestii, która chciałaby uniknąć zawijanie tekstu na myślnikiem.

To jak to zrobiłem:

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

referencyjny:

How to prevent line break at hyphens on all browsers