如何防止表格单元格（不是单个单元格）的列中的换行？答案

【问题标题】：How to prevent line-break in a column of a table cell (not a single cell)?如何防止表格单元格（不是单个单元格）的列中的换行？
【发布时间】：2010-12-26 00:15:38
【问题描述】：

如何防止表格列（不是单个单元格）中的自动换行？

【问题讨论】：

请选择一个答案！ ...我想现在为时已晚
@Steven 你能评论一下为什么this answer 没有回答你的问题吗？

标签： html css layout

【解决方案1】：

您可以使用 CSS 样式的空白：

white-space: nowrap;

【讨论】：

我想防止表格列中的换行，而不是单个单元格。
那么将它添加到列中的每个单元格中？
如果您不想将其应用于表格中的每个单元格，而只应用于特定的单元格，则将一个类添加到您希望应用到的每个 td 单元格。
我想将它应用到同一列的所有单元格。
您可以将此规则与第n个子选择器css-tricks.com/how-nth-child-works一起应用

【解决方案2】：

使用 nowrap 样式：

<td style="white-space:nowrap;">...</td>

这是 CSS！

【讨论】：

我想防止在同一列的所有单元格中换行。

【解决方案3】：

<td style="white-space: nowrap">

nowrap 属性我认为已被弃用。以上是首选方式。

【讨论】：

【解决方案4】：

有几种方法可以做到这一点；它们都不是简单明了的方法。

将 white-space:nowrap 应用于 <col> 将不起作用；只有四个 CSS 属性适用于 <col> 元素 - 背景颜色、宽度、边框和可见性。 IE7 及更早的版本曾经支持所有属性，但那是因为他们使用了一种奇怪的表格模型。 IE8 现在可以匹配其他所有人。

那么，你如何解决这个问题？

好吧，如果您可以忽略 IE（包括 IE8），您可以使用 :nth-child() 伪类从每一行中选择特定的 <td>s。你会使用td:nth-child(2) { white-space:nowrap; }。（这适用于本示例，但如果涉及任何行跨度或列跨度，则会中断。）

如果你必须支持 IE，那么你必须走很长的路，为你想要影响的每个<td> 应用一个类。这很糟糕，但它们是休息时间。

从长远来看，有一些建议可以解决 CSS 中的这一缺陷，以便您可以更轻松地将样式应用于列中的所有单元格。您将能够执行td:nth-col(2) { white-space:nowrap; } 之类的操作，它会执行您想要的操作。

【讨论】：

【解决方案5】：

为了完整起见：

#table_id td:nth-child(2)  {white-space: nowrap;}

用于将样式应用于the table_id 表的第 2 列。

所有主流浏览器都支持此功能，IE 从 IE9 开始支持此功能。

【讨论】：

【解决方案6】：

在您的文本中放置不间断的空格，而不是普通的空格。在 Ubuntu 上，我使用 (Compose Key)-space-space 执行此操作。

【讨论】：

【解决方案7】：

要将其应用于整个表格，您可以将其放在table 标记内：

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

【讨论】：

【解决方案8】：

<table class="blueTable">
  <tr>
     <td>My name is good</td>
   </tr>
</table> 
<style>   
    table.blueTable td,
    table.blueTable th {
        white-space: nowrap;
        /* non-question related further styling */
        border: 1px solid #AAAAAA;
        padding: 3px 2px;
        text-align: left;
    }
</style>

这是一个使用值为 nowrap 的 white space 属性的示例，bluetable 是表格的类，表格下方是 CSS 样式。

【讨论】：

【解决方案9】：

只需添加

style="white-space:nowrap;"

例子：

<table class="blueTable" style="white-space:nowrap;">
   <tr>
      <td>My name is good</td>
    </tr>
 </table>

【讨论】：

这不适用于整个表（即 ALL 列）而不仅仅是单个列吗？