logo标签列表

如何防止表格单元格中一列出现换行（不是单个单元格）？

htmlcsslayout
228

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

9个回答
313
你可以使用CSS样式white-space：
white-space: nowrap;
4
我想防止表格某一列出现换行，而不是单个单元格。 - Steven
15
那么将它添加到该列中的每个单元格？ - David M
将一个类添加到您想要应用此类的每个td单元格中，如果您不希望它应用于表中的每个单元格，而只是特定的单元格。 - James Black
9
你可以将这条规则与第n个子元素选择器一起使用。http://css-tricks.com/how-nth-child-works/ - Zach Lysobey
如果你想知道，这个CSS属性在任何地方都可以使用。http://www.quirksmode.org/css/whitespace.html - Damien
显示剩余2条评论
44

为了完整起见：

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

用于将样式应用于 table_id 表格的第二列。

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

31

只需添加

style="white-space:nowrap;"

例子：

<table class="blueTable" style="white-space:nowrap;">
   <tr>
      <td>My name is good</td>
    </tr>
 </table>
1
这难道不适用于整个表格（即所有列），而不仅仅是单个列吗？ - Joshua Pinter
21

使用nowrap样式：

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

这是CSS！

1
我想要防止同一列中所有单元格的换行。 - Steven
18

有几种方法可以做到这一点；但没有一种是容易、明显的方法。

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

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

如果你可以忽略 IE（包括 IE8），你可以使用 :nth-child() 伪类从每一行中选择特定的 <td>。你可以使用 td:nth-child(2) { white-space:nowrap; }。（这对于这个例子来说是有效的，但如果有任何行跨度或列跨度涉及，则会出现问题。）

如果你必须支持 IE，那么你必须绕远路并给你想要影响的每个 <td> 应用一个类。虽然很烦人，但没办法。

从长远来看，有些提案可以解决 CSS 中这种缺陷，这样你就可以更轻松地将样式应用于列中的所有单元格。你将能够执行类似于 td:nth-col(2) { white-space:nowrap; } 的操作，并且它将实现你想要的效果。

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

我认为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>

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

在文本中使用非间断空格代替普通空格。在Ubuntu上，我使用（Compose Key）- 空格 - 空格进行操作。

5

如果您想将其应用于整个表格，可以将其放在table标签内：

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接