Cómo evitar que el texto en una celda de tabla se ajuste

¿Alguien sabe cómo puedo evitar que el texto en una celda de la tabla se ajuste? Esto es para el encabezado de una tabla, y el encabezado es mucho más largo que los datos debajo de él, pero necesito que se muestre en una sola línea. Está bien si la columna es muy ancha.

El HTML de mi tabla (simplificada) se ve así:

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

El título en sí está envuelto en un div dentro del th etiqueta por razones relacionadas con el JavaScript en la página.

La tabla está saliendo con los encabezados envolviendo varias líneas. Esto parece suceder solo cuando la tabla es lo suficientemente ancha, ya que el navegador está tratando de evitar el desplazamiento horizontal. En mi caso, sin embargo, quiero desplazamiento horizontal.

¿Algunas ideas?

Echa un vistazo a la white-spacepropiedad, usada así:

th {
    white-space: nowrap;
}

Esto obligará a que el contenido se <th>muestre en una línea.

Desde la página vinculada, aquí están las diferentes opciones para white-space:

normal
Este valor dirige a los agentes del usuario a colapsar secuencias de espacios en blanco y romper líneas según sea necesario para llenar cuadros de líneas.

pre
Este valor evita que los agentes del usuario colapsen secuencias de espacio en blanco. Las líneas solo se rompen en los caracteres de línea nueva conservados.

nowrap
Este valor contrae el espacio en blanco como 'normal', pero suprime los saltos de línea dentro del texto.

pre-wrap
Este valor evita que los agentes del usuario colapsen secuencias de espacio en blanco. Las líneas se dividen en los caracteres de línea nueva conservados y, según sea necesario, para llenar los cuadros de línea.

línea previa
Este valor dirige a los agentes de usuario a colapsar secuencias de espacio en blanco. Las líneas se dividen en los caracteres de línea nueva conservados y, según sea necesario, para llenar los cuadros de línea.

<th nowrap="nowrap">

o

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

o

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

Hay al menos dos formas de hacerlo:

Use el atributo nowrap dentro de la etiqueta "td":

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

Use espacios no rompibles entre sus palabras:

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

Llegué a esta pregunta con la necesidad de evitar el ajuste de texto en el guión.

Así es como lo hice:

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

Referencia:

Cómo evitar el salto de línea en guiones en todos los navegadores

Para Usar con React / Material UI

En caso de que se pregunte cómo funciona esto para la interfaz de usuario de material al construir en React, así es como agrega esto a su <TableHead>componente:

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