Как предотвратить перенос текста в ячейке таблицы
Кто-нибудь знает, как я могу предотвратить перенос текста в ячейке таблицы? Это для заголовка таблицы, и заголовок намного длиннее, чем данные под ним, но мне нужно, чтобы он отображался только в одной строке. Ничего страшного, если столбик будет очень широким.
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 на странице.
Таблица выходит с заголовками, которые переносятся на несколько строк. Кажется, это происходит только тогда, когда таблица достаточно широкая, поскольку браузер пытается избежать горизонтальной прокрутки. Однако в моем случае мне нужна горизонтальная прокрутка.
Есть идеи?
Ответы 5
Есть как минимум два способа сделать это:
Используйте атрибут nowrap внутри тега "td":
<th nowrap = "nowrap">Really long column heading</th>
Используйте неразрывные пробелы между словами:
<th>Really long column heading</th>
Взгляните на свойство white-space, которое используется следующим образом:
th {
white-space: nowrap;
}
Это заставит содержимое <th> отображаться в одной строке.
На связанной странице представлены различные варианты white-space:
normal
This value directs user agents to collapse sequences of white space, and break lines as necessary to fill line boxes.pre
This value prevents user agents from collapsing sequences of white space. Lines are only broken at preserved newline characters.nowrap
This value collapses white space as for 'normal', but suppresses line breaks within text.pre-wrap
This value prevents user agents from collapsing sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.pre-line
This value directs user agents to collapse sequences of white space. Lines are broken at preserved newline characters, and as necessary to fill line boxes.
не работает для поля ввода и кнопки в одной ячейке. случайным образом размещен ниже.
Для того, чтобы это работало, элемент Table должен иметь table-layout:fixed;.
@Doomsknight Вы нашли способ добиться этого с помощью поля ввода и другого элемента в той же ячейке?
белое пространство: предварительно; было то, что мне было нужно, так как -28.04 заключался между - и 28.04
@Doomsknight У меня была такая же проблема с флажком, и я решил ее, обновив CSS с помощью input { display: inline; }
он портит другие ячейки, требует дальнейшего исправления, я считаю, что это неполное решение, поскольку некоторые другие ячейки начинают перезаписывать
<th nowrap = "nowrap">
или же
<th style = "white-space:nowrap;">
или же
<th class = "nowrap">
<style type = "text/css">
.nowrap { white-space: nowrap; }
</style>
Обратите внимание, что nowrap устарел. w3.org/TR/html401/struct/tables.html#h-11.2.6. Вместо этого используйте таблицы стилей.
@wisbucky Как «использовать таблицы стилей»?
Я пришел к этому вопросу, чтобы предотвратить перенос текста через дефис.
Вот как я это сделал:
<td><nobr>Table Text</nobr></td>
Справка:
Как предотвратить перенос строки через дефис во всех браузерах
Стоит отметить, что тег nobr нестандартен, как указано в принятом ответе, связанном в этом ответе: stackoverflow.com/a/8755071/4257
Совершенно верно. Ваша точка зрения принята хорошо. Я прочитал все эти комментарии, отметил опыт соответствующих комментаторов и высказал свое мнение. Дефис немного сложен. (Примечание: вопрос, который вы указали в своем комментарии, совпадает с тем, который я указал в своем ответе)
Да, это должен был быть тот же вопрос. Я просто хотел убедиться, что здесь было опубликовано предостережение на случай, если кто-то найдет этот ответ в будущем, и не удосужился прочитать связанную ссылку.
Для использования с пользовательским интерфейсом React / Material
Если вам интересно, как это работает для UI материала при сборке в React, вот как вы добавляете это в свой компонент <TableHead>:
<TableHead style = {{ whiteSpace: 'nowrap'}}>
Обратите внимание, что
nowrapустарел. w3.org/TR/html401/struct/tables.html#h-11.2.6. Вместо этого используйте таблицы стилей.