如何防止表单元格(而不是单个单元格)中的行中断?

How can I prevent automatic line breaks in a column of table (not a single cell)?

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

8 个解决方案

#1

195

You can use the CSS style white-space:

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

white-space: nowrap;

#2

For completion sake:

为了完成:

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

Is used for applying a style to the 2 column of the table_id table.

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

This is supported by all major Browsers, IE started supporting this from IE9 onwards.

所有主要的浏览器都支持这一点(从IE9开始支持它)。

#3

Use the nowrap style:

使用nowrap风格:}

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

It's CSS!

CSS !

#4

There are a few ways to do this; none of them are the easy, obvious way.

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

Applying white-space:nowrap to a <col> won't work; only four CSS properties work on <col> elements - background-color, width, border, and visibility. IE7 and earlier used to support all properties, but that's because they used a strange table model. IE8 now matches everyone else.

应用空格:nowrap到元素——背景色、宽度、边框和可见性。IE7和之前的版本都支持所有属性，但那是因为它们使用了一个奇怪的表模型。IE8现在与其他所有人都匹配。

So, how do you solve this?

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

Well, if you can ignore IE (including IE8), you can use the :nth-child() pseudoclass to select particular <td>s from each row. You'd use td:nth-child(2) { white-space:nowrap; }. (This works for this example, but would break if you had any rowspans or colspans involved.)

如果您可以忽略IE(包括IE8)，您可以使用:nth-child()伪类来从每一行中选择特定的s。你会用td:nth-child(2){空格:nowrap;}。(对于本例来说，这是可行的，但如果涉及到任何rowspan或colspan，就会中断。)

If you have to support IE, then you've got to go the long way around and apply a class to every <td> that you want to affect. It sucks, but them's the breaks.

如果你必须支持IE，那么你就必须走很长的路，为你想要影响的每一个应用一个类。这很糟糕，但这是机会。

In the long run, there are proposals to fix this lack in CSS, so that you can more easily apply styles to all the cells in a column. You'll be able to do something like td:nth-col(2) { white-space:nowrap; } and it would do what you want.

从长远来看，有一些建议可以弥补CSS中的不足，这样您就可以更容易地将样式应用到列中的所有单元格中。你可以做一些像td:nth-col(2){空白:nowrap;它会做你想做的事。

#5

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

The nowrap attribute I believe is deprecated. The above is the preferred way.

我认为nowrap属性已经过时了。以上是首选方式。

#6

Put non-breaking spaces in your text instead of normal spaces. On Ubuntu I do this with (Compose Key)-space-space.

在你的文本中放置一些非打破的空格，而不是普通的空格。在Ubuntu上，我用(合成键)-空间空间。

#7

To apply it to the entire table, you can place it within the table tag:

要将其应用到整个表，可以将其放在表标记中:

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

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

#8

-1

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

This is an example usage of the white space property with value nowrap, the bluetable is the class of the table, below the table are the css styles

这是一个使用带有value nowrap的空白属性的示例，蓝色是表的类，表下面是css样式

#1

195