Como impedir que o texto em uma célula da tabela seja quebrado

Alguém sabe como posso impedir que o texto em uma célula da tabela seja quebrado? Isso é para o cabeçalho de uma tabela e o cabeçalho é muito mais longo que os dados abaixo, mas eu preciso que ele seja exibido em apenas uma linha. Tudo bem se a coluna for muito larga.

O HTML da minha tabela (simplificada) fica assim:

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

O cabeçalho em si é envolvido em uma div dentro da thtag por motivos pertencentes ao javascript na página.

A tabela está saindo com os títulos agrupados em várias linhas. Isso parece acontecer apenas quando a tabela é suficientemente larga, pois o navegador está tentando evitar a rolagem horizontal. No meu caso, porém, quero rolagem horizontal.

Alguma ideia?

Dê uma olhada na white-spacepropriedade, usada assim:

th {
    white-space: nowrap;
}

Isso forçará o conteúdo de <th>a ser exibido em uma linha.

Na página vinculada, aqui estão as várias opções para white-space:

normal
Esse valor direciona os agentes do usuário a recolher seqüências de espaços em branco e interromper linhas conforme necessário para preencher caixas de linhas.

pre
Esse valor evita que os agentes do usuário colapsem sequências de espaço em branco. As linhas são quebradas apenas em caracteres de nova linha preservados.

nowrap
Esse valor recolhe o espaço em branco como 'normal', mas suprime as quebras de linha no texto.

pre-wrap
Esse valor evita que os agentes do usuário colapsem sequências de espaço em branco. As linhas são quebradas nos caracteres de nova linha preservados e, conforme necessário, para preencher as caixas de linha.

pré-linha
Esse valor direciona os agentes do usuário a recolher sequências de espaço em branco. As linhas são quebradas nos caracteres de nova linha preservados e, conforme necessário, para preencher as caixas de linha.

<th nowrap="nowrap">

ou

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

ou

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

Há pelo menos duas maneiras de fazer isso:

Use o atributo nowrap dentro da tag "td":

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

Use espaços inquebráveis ​​entre suas palavras:

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

Cheguei a esta pergunta que precisava impedir a quebra de texto no hífen.

Foi assim que eu fiz:

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

Referência:

Como evitar quebras de linha em hífens em todos os navegadores

Para uso com a interface do usuário React / Material

Caso você esteja aqui imaginando como isso funciona para a interface do usuário do material ao criar no React, veja como você adiciona isso ao seu <TableHead>componente:

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