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

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

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

什么好主意吗?


当前回答

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

我是这样做的:

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

参考:

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

其他回答

用于React / Material UI

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

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

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

我是这样做的:

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

参考:

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

至少有两种方法:

在"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>的内容显示在一行上。

从链接页面,这里有各种留白的选项:

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.

<th nowrap="nowrap">

or

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

or

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