如何防止文本在表格单元从包装

有人知道我如何可以防止文本在表格单元从包装?这是一个表的标题，标题比它下面的数据长得多，但我需要它只显示在一行上。如果柱子很宽也可以。

我的(简化)表格的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>

由于与页面上的javascript有关的原因，标题本身被包装在th标记中的div中。

表格出来时，标题被包装成多行。这似乎只发生在表足够宽的情况下，因为浏览器试图避免水平滚动。在我的例子中，我想要水平滚动。

什么好主意吗?

307330 次浏览
小开

至少有两种方法:

在"td"标签中使用nowrap属性:

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

在单词之间使用不可分割的空格:

<th>Really&nbsp;long&nbsp;column&nbsp;heading</th>
小开
最佳答案

看一下white-space属性，它是这样使用的:

th {
white-space: nowrap;
}

这将强制<th>的内容显示在一行上。

从链接页面，这里是white-space的各种选项:

< p > 正常的 < br > 这个值指示用户代理折叠空白序列，并在必要时换行以填充行框 < p > 精准医疗 < br > 此值可防止用户代理压缩空白序列。仅在保留的换行符处换行 < p > nowrap < br > 这个值将空格折叠为'normal'，但抑制文本中的换行符 < p > pre-wrap < br > 此值可防止用户代理压缩空白序列。在保留的换行符处换行，并在必要时填充行框 < p > pre-line < br > 该值指示用户代理折叠空白序列。在保留的换行符处换行，并在必要时填充行框
小开 
<th nowrap="nowrap">

或

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

或

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

我来这个问题需要防止文本换行在连字符。

我是这样做的:

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

参考:

如何在所有浏览器中防止连字符的换行 .

小开

用于React / Material UI

如果你在这里想知道在React中构建时这对于Material UI是如何工作的，下面是你如何将它添加到你的<TableHead>组件:

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

提交答案