it-swarm.com.de

Wie kann ein Zeilenumbruch in einer Spalte einer Tabellenzelle (nicht einer einzelnen Zelle) verhindert werden?

Wie kann ich automatische Zeilenumbrüche in einer Tabellenspalte (keine einzelne Zelle) verhindern?

149
Steven

Sie können den CSS-Stil Leerraum verwenden:

white-space: nowrap;
228
David M

Zur Vervollständigung:

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

Dient zum Anwenden eines Stils auf die 2-Spalte von the table_id Tabelle.

Dies wird von allen gängigen Browsern unterstützt, IE) unterstützt dies ab IE9.

35
estani

Verwenden Sie den Nowrap-Stil:

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

Es ist CSS!

18
Derek Illchuk

Es gibt verschiedene Möglichkeiten, dies zu tun. Keiner von ihnen ist der einfache, offensichtliche Weg.

Anwenden von Leerzeichen: Nowrap auf einen <col> Funktioniert nicht. Nur vier CSS-Eigenschaften können für <col> - Elemente verwendet werden - Hintergrundfarbe, Breite, Rahmen und Sichtbarkeit. IE7 und frühere Versionen unterstützten alle Eigenschaften, aber das liegt daran, dass sie ein seltsames Tabellenmodell verwendeten. IE8 passt jetzt zu allen anderen.

Wie lösen Sie das?

Wenn Sie IE (einschließlich IE8)) ignorieren können, können Sie die Pseudoklasse :nth-child() verwenden, um bestimmte <td> Aus jeder Zeile auszuwählen Verwenden Sie td:nth-child(2) { white-space:nowrap; }. (Dies funktioniert in diesem Beispiel, würde aber brechen, wenn Sie irgendwelche beteiligten Zeilen- oder Spaltenbereiche hätten.)

Wenn Sie IE unterstützen müssen, müssen Sie den langen Weg gehen und eine Klasse auf jedes <td> Anwenden, das Sie beeinflussen möchten. Es ist scheiße, aber das sind die Pausen.

Auf lange Sicht gibt es Vorschläge, um diesen Mangel in CSS zu beheben, sodass Sie Stile einfacher auf alle Zellen in einer Spalte anwenden können. Sie werden in der Lage sein, etwas wie td:nth-col(2) { white-space:nowrap; } zu tun, und es würde tun, was Sie wollen.

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

Das nowrap Attribut ist meines Erachtens veraltet. Das Obige ist der bevorzugte Weg.

12
Dan Breen

Einfach hinzufügen

style="white-space:nowrap;"

Beispiel:

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

Fügen Sie in Ihren Text nicht unterbrechende Leerzeichen ein, sondern normale Leerzeichen. Unter Ubuntu mache ich das mit (Compose Key) -space-space.

5
Roger Keays

Um es auf die gesamte Tabelle anzuwenden, können Sie es im Tag table platzieren:

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

4
OlgaMaciaszek