Як запобігти загортанню тексту в комірці таблиці

Хтось знає, як я можу запобігти загортанню тексту в комірці таблиці? Це для заголовка таблиці, а заголовок набагато довший, ніж дані під ним, але мені потрібно, щоб він відображався лише в одному рядку. Добре, якщо стовпчик дуже широкий.

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>

Сам заголовок загортається у div всередині thтегу з причин, що стосуються javascript на сторінці.

Таблиця виходить із заголовками, що загортаються на кілька рядків. Здається, це відбувається лише тоді, коли таблиця є достатньо широкою, оскільки браузер намагається уникати горизонтальної прокрутки. Однак у моєму випадку я хочу горизонтальну прокрутку.

Будь-які ідеї?

Подивіться на white-spaceвласність, використану так:

th {
    white-space: nowrap;
}

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

На пов'язаній сторінці наведені різні варіанти для white-space:

нормальне
Це значення спрямовує користувальницьких агентів на згортання послідовностей пробілів та розрив ліній у міру необхідності для заповнення рядків.

pre
Це значення не дозволяє користувачам-агентам згортати послідовності пробілів. Рядки розбиваються лише на збережених символах нового рядка.

nowrap
Це значення згортає пробіл, як для 'нормального', але пригнічує розриви рядків у тексті.

попереднє обгортання
Це значення не дозволяє користувачам-агентам згортати послідовності пробілів. Рядки розбиваються на збережених символах нового рядка і за необхідності заповнюють рядки.

попередня лінія
Це значення спрямовує агентів користувача на згортання послідовностей пробілів. Рядки розбиваються на збережених символах нового рядка і за необхідності заповнюють рядки.

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