如何防止表格单元格中的文本进行包装

Does anyone know how I can prevent the text in a table cell from wrapping? This is for the header of a table, and the heading is a lot longer than the data under it, but I need it to display on only one line. It is okay if the column is very wide.

有人知道如何防止表格单元格中的文本进行包装吗?这是表的标题，标题比下面的数据要长得多，但是我只需要在一行中显示标题。如果列很宽，就可以了。

The HTML of my (simplified) table looks like this:

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

The heading itself is wrapped in a div inside the th tag for reasons pertaining to the javascript on the page.

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

The table is coming out with the headings wrapping onto multiple lines. This seems to only happen when the table is sufficiently wide, as the browser is trying to avoid horizontal scrolling. In my case, though, I want horizontal scrolling.

这张桌子上的标题用多行文字表示。这似乎只有在表足够宽时才会发生，因为浏览器试图避免水平滚动。但在我的例子中，我想要水平滚动。

Any ideas?

什么好主意吗?

4 个解决方案

#1

Have a look at the white-space property, used like this:

看看白色空间的属性，就像这样:

th {
    white-space: nowrap;
}

This will force the contents of <th> to display on one line.

这将迫使的内容显示在一行上。

From linked page, here are the various options for 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.

预行此值指示用户代理将空格序列折叠。行在保留的换行字符处被破坏，并根据需要填充换行框。

#2

<th nowrap="nowrap">

or

或

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

or

或

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

#3

There are at least two ways to do it:

至少有两种方法:

Use nowrap attribute inside the "td" tag:

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

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

Use non-breakable spaces between your words:

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

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

#4

I came to this question needing to prevent text wrapping at the hyphen.

我想到了这个问题，需要防止在连字符处进行文本包装。

This is how I did it:

我是这样做的:

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

Reference:

参考:

How to prevent line break at hyphens on all browsers

如何在所有浏览器上防止连字符的断线?