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

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

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 на странице.

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

Любые идеи?

ОТВЕТЫ

Ответ 1

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

th {
    white-space: nowrap;
}

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

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

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

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

Nowrap
Это значение сокращает пробел как "нормальный", но подавляет разрывы строк в тексте.

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

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

Ответ 2

<th nowrap="nowrap">

или

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

или

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

Ответ 3

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

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

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

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

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