Как предотвратить перенос текста в ячейке таблицы

Кто-нибудь знает, как я могу предотвратить перенос текста в ячейке таблицы? Это для заголовка таблицы, и заголовок намного длиннее, чем данные в нем, но мне нужно, чтобы он отображался только в одной строке. Это нормально, если колонка очень широкая.

HTML-код моей (упрощенной) таблицы выглядит следующим образом:

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

Сам заголовок заключен в thтег внутри тега по причинам, относящимся к JavaScript на странице.

Таблица выходит с заголовками на несколько строк. Похоже, это происходит только тогда, когда таблица достаточно широка, поскольку браузер пытается избежать горизонтальной прокрутки. В моем случае, однако, я хочу горизонтальную прокрутку.

Любые идеи?

Посмотрите на white-spaceсвойство, используемое так:

th {
    white-space: nowrap;
}

Это заставит содержимое <th>отображаться в одной строке.

На странице со ссылками представлены различные варианты white-space:

normal
Это значение предписывает пользовательским агентам свернуть последовательности пробелов и разбивать строки по мере необходимости, чтобы заполнить линейные блоки.

pre
Это значение предотвращает свертывание пользовательских агентов последовательностями пробелов. Строки ломаются только у сохраненных символов новой строки.

Nowrap
Это значение сворачивает пробел, как и в случае с «normal», но подавляет разрывы строк в тексте.

pre-wrap
Это значение предотвращает свертывание пользовательских агентов последовательностями пробелов. Строки разбиваются при сохраненных символах новой строки и по мере необходимости заполняют поля строк.

pre-line
Это значение указывает агентам пользователя свернуть последовательности пробелов. Строки разбиваются при сохраненных символах новой строки и по мере необходимости заполняют поля строк.

<th nowrap="nowrap">

или

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

или

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

Есть как минимум два способа сделать это:

Используйте атрибут nowrap внутри тега "td":

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

Используйте неразрывные пробелы между своими словами:

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

Я пришел к этому вопросу, чтобы предотвратить перенос текста на дефис.

Вот как я это сделал:

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

Ссылка:

Как предотвратить разрыв строки в дефисах во всех браузерах

Для использования с пользовательским интерфейсом React / Material

Если вам интересно, как это работает для пользовательского интерфейса материала при сборке в React, вот как вы добавляете это к своему <TableHead>Компоненту:

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