html - 如何防止表格单元格中的文本换行

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>

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

表格出来的标题是多行的。这似乎只在表格足够宽时发生，因为浏览器试图避免水平滚动。不过，就我而言，我想要水平滚动。

有什么想法吗？

Answer 1

看看 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.