Jak zapobiec zawijaniu tekstu w komórce tabeli

Czy ktoś wie, jak mogę zapobiec zawijaniu tekstu w komórce tabeli? To jest dla nagłówka tabeli, a nagłówek jest znacznie dłuższy niż dane w nim zawarte, ale muszę go wyświetlać tylko w jednym wierszu. W porządku, jeśli kolumna jest bardzo szeroka.

HTML mojej (uproszczonej) 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 jest zawinięty w div wewnątrz thtagu z powodów związanych z javascript na stronie.

Stół wychodzi z nagłówkami zawijanymi w wiele wierszy. Wydaje się, że dzieje się tak tylko wtedy, gdy stół jest wystarczająco szeroki, ponieważ przeglądarka próbuje uniknąć przewijania w poziomie. Jednak w moim przypadku chcę przewijanie w poziomie.

Jakieś pomysły?

Spójrz na white-spacewłaściwość, użytą w ten sposób:

th {
    white-space: nowrap;
}

Wymusi <th>to wyświetlenie zawartości w jednym wierszu.

Na połączonej stronie znajdują się różne opcje white-space:

normal
Ta wartość kieruje programy klienckie do zwijania sekwencji białych znaków i przerywania linii w razie potrzeby w celu wypełnienia pól linii.

pre
Ta wartość zapobiega zwijaniu się przez użytkownika sekwencji sekwencji białych znaków. Linie są łamane tylko przy zachowanych znakach nowej linii.

nowrap
Ta wartość zwija białe znaki jak dla „normalnego”, ale pomija łamanie linii w tekście.

pre-wrap
Ta wartość zapobiega zwijaniu się przez użytkownika sekwencji sekwencji białych znaków. Linie są przerywane przy zachowanych znakach nowej linii i, jeśli to konieczne, do wypełnienia pól linii.

pre-line
Ta wartość kieruje programy użytkownika do zwinięcia sekwencji białych znaków. Linie są przerywane przy zachowanych znakach nowej linii i, jeśli to konieczne, do wypełnienia pól linii.

<th nowrap="nowrap">

lub

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

lub

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

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

Użyj atrybutu nowrap w tagu „td”:

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

Używaj nieprzerwanych spacji między swoimi słowami:

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

Doszedłem do tego pytania, aby zapobiec zawijaniu tekstu przy łączniku.

Oto jak to zrobiłem:

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

Odniesienie:

Jak zapobiec łamaniu linii przy łącznikach we wszystkich przeglądarkach

Do użytku z interfejsem React / Material

Jeśli zastanawiasz się, jak to działa w interfejsie materiałowym podczas budowania w React, oto jak dodajesz to do swojego <TableHead>komponentu:

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