如何防止表格单元格中的文字换行

有谁知道我如何防止表格单元格中的文本换行？这是用于表头的，其标题比其下的数据长很多，但是我只需要在一行上显示即可。如果列很宽也可以。

我的（简化的）表的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>

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

该表将标题与多行包装在一起。这似乎仅在表足够宽时才会发生，因为浏览器试图避免水平滚动。不过，就我而言，我想水平滚动。

有任何想法吗？

看一下该white-space属性，如下所示：

th {
    white-space: nowrap;
}

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

在链接页面中，以下是各种选项white-space：

normal
此值指示用户代理折叠空白序列，并在必要时中断行以填充行框。

pre
此值可防止用户代理折叠空白序列。行仅在保留的换行符处断开。

nowrap
该值与'normal'一样折叠空白，但抑制文本内的换行符。

pre-wrap
此值防止用户代理折叠空白序列。行在保留的换行符处断开，并在必要时填充行框。

前行
此值指导用户代理折叠空白序列。行在保留的换行符处断开，并在必要时填充行框。

<th nowrap="nowrap">

要么

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

要么

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

至少有两种方法可以做到这一点：

在“ td”标签内使用nowrap属性：

<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 UI

如果您想在React中构建材质UI时如何工作，请按以下步骤将其添加到<TableHead>Component中：

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