Wie kann man verhindern, dass Text in einer Tabellenzelle umbrochen wird?

Question

Weiß jemand, wie ich verhindern kann, dass der Text in einer Tabellenzelle umbrochen wird? Es geht um die Überschrift einer Tabelle, und die Überschrift ist viel länger als die Daten darunter, aber ich muss sie in nur einer Zeile anzeigen. Es ist in Ordnung, wenn die Spalte sehr breit ist.

Der HTML-Code meiner (vereinfachten) Tabelle sieht folgendermaßen aus:

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

Die Überschrift selbst ist in ein div innerhalb der th Tag aus Gründen, die mit dem Javascript auf der Seite zusammenhängen.

Die Tabelle wird so ausgegeben, dass sich die Überschriften auf mehrere Zeilen verteilen. Dies scheint nur zu passieren, wenn die Tabelle ausreichend breit ist, da der Browser versucht, horizontales Scrollen zu vermeiden. In meinem Fall möchte ich jedoch einen horizontalen Bildlauf.

Irgendwelche Ideen?

Answer 1

Werfen Sie einen Blick auf die white-space Eigenschaft, die wie folgt verwendet wird:

th {
    white-space: nowrap;
}

Dadurch wird der Inhalt von <th> in einer Zeile anzuzeigen.

Auf der verlinkten Seite finden Sie die verschiedenen Optionen für white-space :

normal
Dieser Wert weist die Benutzeragenten an, Sequenzen von Leerraum zu kürzen und Zeilen zu unterbrechen, wenn dies erforderlich ist, um Zeilenfelder zu füllen.

vor
Dieser Wert verhindert, dass Benutzeragenten Sequenzen von Leerzeichen zusammenbrechen. Zeilen werden nur an erhaltenen Zeilenumbrüchen unterbrochen.

nowrap
Dieser Wert reduziert den Leerraum wie bei "normal", unterdrückt aber die Zeilenumbrüche im Text.

vorverpacken
Dieser Wert verhindert, dass User-Agents Sequenzen von Leerzeichen zusammenbrechen lassen. Zeilen werden an erhaltenen Zeilenumbrüchen und bei Bedarf zum Füllen von Zeilenrahmen unterbrochen.

Vorspann
Dieser Wert weist Benutzeragenten an, Sequenzen von Leerzeichen zu kollabieren. Zeilen werden an erhaltenen Zeilenumbrüchen und bei Bedarf zum Füllen von Zeilenrahmen unterbrochen.

Answer 2

<th nowrap="nowrap">

o

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

o

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

Answer 3

Es gibt mindestens zwei Möglichkeiten, dies zu tun:

Verwenden Sie das nowrap-Attribut innerhalb des "td"-Tags:

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

Verwenden Sie nicht trennbare Leerzeichen zwischen Ihren Wörtern:

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

Answer 4

Ich bin auf diese Frage gekommen, weil ich den Textumbruch am Bindestrich verhindern wollte.

So habe ich es gemacht:

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

Referenz:

Zeilenumbruch bei Bindestrichen in allen Browsern verhindern

Answer 5

Zur Verwendung mit React / Material UI

Für den Fall, dass Sie sich fragen, wie dies für Material UI bei der Erstellung in React funktioniert, hier ist, wie Sie dies zu Ihrem <TableHead> Bauteil:

<TableHead style={{ whiteSpace: 'nowrap'}}>