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

Question

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

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

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

Есть идеи?

Answer 1

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

th {
    white-space: nowrap;
}

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

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

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

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

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

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

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

Answer 2

<th nowrap="nowrap">

или

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

или

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

Answer 3

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

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

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

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

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

Answer 4

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

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

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

Справка:

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