So verhindern Sie, dass Text in einer Tabellenzelle umbrochen wird

Weiß jemand, wie ich verhindern kann, dass der Text in einer Tabellenzelle umbrochen wird? Dies ist für die Kopfzeile einer Tabelle und die Überschrift ist viel länger als die Daten darunter, aber ich brauche sie, um sie nur in einer Zeile anzuzeigen. 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 wird thaus Gründen, die das Javascript auf der Seite betreffen, in ein div innerhalb des Tags eingeschlossen.

Die Tabelle wird mit Überschriften in mehreren Zeilen angezeigt. Dies scheint nur zu geschehen, wenn die Tabelle ausreichend breit ist, da der Browser versucht, horizontales Scrollen zu vermeiden. In meinem Fall möchte ich jedoch horizontales Scrollen.

Irgendwelche Ideen?

Schauen Sie sich die white-spaceImmobilie so an:

th {
    white-space: nowrap;
}

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

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

normal
Dieser Wert weist Benutzeragenten an, Leerzeichenfolgen zu reduzieren und Zeilen nach Bedarf zu unterbrechen, um Zeilenfelder zu füllen.

pre
Dieser Wert verhindert, dass Benutzeragenten Leerzeichenfolgen reduzieren. Zeilen werden nur bei erhaltenen Zeilenumbrüchen unterbrochen.

nowrap
Dieser Wert reduziert Leerzeichen wie bei 'normal', unterdrückt jedoch Zeilenumbrüche im Text.

Pre-Wrap
Dieser Wert verhindert, dass Benutzeragenten Leerzeichenfolgen reduzieren. Zeilen werden bei beibehaltenen Zeilenumbrüchen und bei Bedarf zum Füllen von Zeilenfeldern unterbrochen.

Vorzeile
Dieser Wert weist Benutzeragenten an, Leerzeichenfolgen zu reduzieren. Zeilen werden bei beibehaltenen Zeilenumbrüchen und bei Bedarf zum Füllen von Zeilenfeldern unterbrochen.

<th nowrap="nowrap">

oder

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

oder

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

Es gibt mindestens zwei Möglichkeiten:

Verwenden Sie das nowrap-Attribut im "td" -Tag:

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

Verwenden Sie nicht unterbrechbare Leerzeichen zwischen Ihren Wörtern:

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

Ich kam zu dieser Frage, um zu verhindern, dass der Bindestrich umbrochen wird.

So habe ich es gemacht:

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

Referenz:

So verhindern Sie Zeilenumbrüche bei Bindestrichen in allen Browsern

Zur Verwendung mit React / Material UI

Falls Sie sich hier fragen, wie dies für die Material-Benutzeroberfläche beim Erstellen in React funktioniert, fügen Sie dies Ihrer <TableHead>Komponente wie folgt hinzu :

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