Wie kann ein Zeilenumbruch in einer Spalte einer Tabellenzelle (keine einzelne Zelle) verhindert werden?

170

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

html css layout Steven
quelle
1
Bitte wählen Sie eine Antwort! ... jetzt wohl zu spät
Jaeeun Lee

Antworten:

258

Sie können den Leerraum im CSS-Stil verwenden:

white-space: nowrap;
David M.
quelle
4
Ich möchte Zeilenumbrüche in einer Spalte einer Tabelle verhindern, nicht in einer einzelnen Zelle.
Steven
11
Fügen Sie es also jeder Zelle in der Spalte hinzu?
David M
Fügen Sie jeder td-Zelle, auf die dies angewendet werden soll, eine Klasse hinzu, wenn Sie nicht möchten, dass sie auf jede Zelle in der Tabelle angewendet wird, sondern nur auf bestimmte.
James Black
Ich möchte es auf alle Zellen derselben Spalte anwenden.
Steven
7
Sie können diese Regel zusammen mit der n-ten untergeordneten
Auswahl
36

Zur Vervollständigung:

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

Wird zum Anwenden eines Stils auf die Spalte 2 der the table_idTabelle verwendet.

Dies wird von allen wichtigen Browsern unterstützt. Der IE unterstützt dies ab IE9.

estani
quelle
19

Verwenden Sie den Nowrap-Stil:

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

Es ist CSS!

Derek Illchuk
quelle
Ich möchte Zeilenumbrüche in allen Zellen derselben Spalte verhindern.
Steven
17

Einfach hinzufügen

style="white-space:nowrap;"

Beispiel:

<table class="blueTable" style="white-space:nowrap;">
   <tr>
      <td>My name is good</td>
    </tr>
 </table>
Harun oder Rashid
quelle
Würde dies nicht für die gesamte Tabelle (dh ALLE Spalten) und nicht nur für eine einzelne Spalte gelten?
Joshua Pinter
15

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

Anwenden von Leerzeichen: Nowrap auf ein <col>wird nicht funktionieren; Nur vier CSS-Eigenschaften arbeiten mit <col>Elementen - Hintergrundfarbe, Breite, Rahmen und Sichtbarkeit. IE7 und früher unterstützten früher 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 den IE (einschließlich IE8) ignorieren können, können Sie die :nth-child()Pseudoklasse verwenden, um bestimmte <td>s aus jeder Zeile auszuwählen . Du würdest benutzen td:nth-child(2) { white-space:nowrap; }. (Dies funktioniert in diesem Beispiel, würde jedoch unterbrochen, wenn Zeilen- oder Spaltenbereiche beteiligt wären.)

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

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

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

Das nowrapAttribut, von dem ich glaube, dass es veraltet ist. Das Obige ist der bevorzugte Weg.

Dan Breen
quelle
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>

Dies ist ein Beispiel für die Verwendung der White Space-Eigenschaft mit dem Wert nowrap. Die Bluetable ist die Klasse der Tabelle. Unter der Tabelle befinden sich die CSS-Stile.

Matovu Ronald
quelle
5

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

Roger Keays
quelle
5

Um es auf die gesamte Tabelle anzuwenden, können Sie es innerhalb des tableTags platzieren:

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

OlgaMaciaszek
quelle