如何防止在表的列中自动换行(不是单个单元格)?


你可以使用CSS样式的空白:

white-space: nowrap;

使用nowrap样式:

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

CSS !


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

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


有几种方法可以做到这一点;这些方法都不是简单而明显的。

将white-space:nowrap应用于<col>将不起作用;只有四个CSS属性适用于<col>元素- background-color, width, border和visibility。IE7和更早的版本曾经支持所有属性,但那是因为他们使用了一个奇怪的表模型。IE8现在可以和其他所有产品相匹配了。

那么如何解决这个问题呢?

好吧,如果你可以忽略IE(包括IE8),你可以使用:n -child()伪类从每一行中选择特定的<td>s。你可以使用td:n -child(2) {white-space:nowrap;}。(这对于这个例子是有效的,但是如果涉及到任何行span或colspan,就会失效。)

如果你必须支持IE,那么你就必须绕远路,对你想要影响的每一个<td>应用一个类。这很糟糕,但这是转机。

从长远来看,有一些建议可以修复CSS中的这一缺陷,这样您就可以更容易地将样式应用到列中的所有单元格。你可以这样做:td:nth-col(2) {white-space:nowrap;你想要什么它就会怎样。


为了完整起见:

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

用于对table_id表的2列应用样式。

所有主流浏览器都支持这一点,IE从IE9开始支持这一点。


在文本中使用非换行空格,而不是常规空格。在Ubuntu上,我使用(Compose Key)-space-space。


要将它应用到整个表,你可以将它放在table标签中:

<表风格= "空白:nowrap;}" >


<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的空格属性的例子,bluetable是表的类,表下面是CSS样式。


只需添加

style="white-space:nowrap;"

例子:

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