Comment faire pour empêcher le texte dans une cellule de tableau d'habillage

Est-ce que quelqu'un sait comment empêcher le texte d'une cellule de tableau de s'habiller? C'est pour l'en-tête d'un tableau, et l'en-tête est beaucoup plus long que les données en dessous, mais j'ai besoin qu'il s'affiche sur une seule ligne. C'est correct si la colonne est très large.

Le code HTML de ma table (simplifiée) ressemble à ceci:

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

Le titre lui-même est enveloppé dans un div à l'intérieur de la thbalise pour des raisons liées au javascript sur la page.

Le tableau sort avec les en-têtes sur plusieurs lignes. Cela ne semble se produire que lorsque le tableau est suffisamment large, car le navigateur essaie d'éviter le défilement horizontal. Dans mon cas, cependant, je veux un défilement horizontal.

Des idées?

Jetez un œil à la white-spacepropriété, utilisée comme ceci:

th {
    white-space: nowrap;
}

Cela forcera le contenu de <th>à s'afficher sur une seule ligne.

À partir de la page liée, voici les différentes options pour white-space:

normal
Cette valeur indique aux agents utilisateurs de réduire les séquences d'espaces blancs et de couper les lignes si nécessaire pour remplir les zones de ligne.

pre
Cette valeur empêche les agents utilisateurs de réduire les séquences d'espaces blancs. Les lignes ne sont rompues qu'au niveau des caractères de nouvelle ligne préservés.

nowrap
Cette valeur réduit l'espace blanc comme pour «normal», mais supprime les sauts de ligne dans le texte.

pre-wrap
Cette valeur empêche les agents utilisateurs de réduire les séquences d'espace blanc. Les lignes sont coupées au niveau des caractères de nouvelle ligne conservés et, si nécessaire, pour remplir les zones de ligne.

pre-line
Cette valeur indique aux agents utilisateurs de réduire les séquences d'espaces blancs. Les lignes sont coupées au niveau des caractères de nouvelle ligne conservés et, si nécessaire, pour remplir les zones de ligne.

<th nowrap="nowrap">

ou

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

ou

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

Il existe au moins deux façons de procéder:

Utilisez l'attribut nowrap à l'intérieur de la balise "td":

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

Utilisez des espaces insécables entre vos mots:

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

J'en suis venu à cette question qui avait besoin d'empêcher l'habillage du texte au trait d'union.

Voici comment je l'ai fait:

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

Référence:

Comment éviter les sauts de ligne au niveau des tirets sur tous les navigateurs

À utiliser avec React / Material UI

Dans le cas où vous vous demandez comment cela fonctionne pour l'interface utilisateur matérielle lors de la construction dans React, voici comment ajouter ceci à votre <TableHead>composant:

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