Come impedire il wrapping del testo in una cella di tabella

Qualcuno sa come posso evitare che il testo in una cella di una tabella venga spostato? Questo è per l'intestazione di una tabella e l'intestazione è molto più lunga dei dati sottostanti, ma ne ho bisogno per essere visualizzata su una sola riga. Va bene se la colonna è molto ampia.

L'HTML della mia tabella (semplificata) è simile al seguente:

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

L'intestazione stessa è racchiusa in un div all'interno del thtag per motivi attinenti al javascript nella pagina.

Il tavolo esce con le intestazioni che si avvolgono su più righe. Questo sembra accadere solo quando la tabella è sufficientemente ampia, poiché il browser sta cercando di evitare lo scorrimento orizzontale. Nel mio caso, però, voglio uno scorrimento orizzontale.

Qualche idea?

Dai un'occhiata alla white-spaceproprietà, utilizzata in questo modo:

th {
    white-space: nowrap;
}

Ciò forzerà la <th>visualizzazione del contenuto di su una riga.

Dalla pagina collegata, ecco le varie opzioni per white-space:

normale
Questo valore indica agli interpreti di comprimere le sequenze di spazi bianchi e di interrompere le linee, se necessario, per riempire le caselle.

pre
Questo valore impedisce agli interpreti di comprimere sequenze di spazi bianchi. Le linee sono spezzate solo ai caratteri di nuova riga conservati.

nowrap
Questo valore comprime lo spazio bianco come per "normale", ma elimina le interruzioni di riga all'interno del testo.

pre-wrapping
Questo valore impedisce agli interpreti di comprimere sequenze di spazi bianchi. Le linee sono spezzate ai caratteri di nuova riga conservati e, se necessario, per riempire le caselle di linea.

pre-riga
Questo valore indica agli interpreti di comprimere sequenze di spazi bianchi. Le linee sono spezzate ai caratteri di nuova riga conservati e, se necessario, per riempire le caselle di linea.

<th nowrap="nowrap">

o

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

o

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

Esistono almeno due modi per farlo:

Usa l'attributo nowrap all'interno del tag "td":

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

Usa spazi non interrompibili tra le tue parole:

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

Sono arrivato a questa domanda che ha bisogno di impedire il ritorno a capo del trattino.

Ecco come l'ho fatto:

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

Riferimento:

Come prevenire l'interruzione di riga in trattini su tutti i browser

Da utilizzare con l'interfaccia utente React / Material

Nel caso in cui ti stia chiedendo come funziona l'interfaccia utente materiale durante la creazione in React, ecco come aggiungere questo al tuo <TableHead>componente:

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