如何防止在表的列中自动换行(不是单个单元格)?
当前回答
只需添加
style="white-space:nowrap;"
例子:
<table class="blueTable" style="white-space:nowrap;">
<tr>
<td>My name is good</td>
</tr>
</table>
其他回答
在文本中使用非换行空格,而不是常规空格。在Ubuntu上,我使用(Compose Key)-space-space。
你可以使用CSS样式的空白:
white-space: nowrap;
只需添加
style="white-space:nowrap;"
例子:
<table class="blueTable" style="white-space:nowrap;">
<tr>
<td>My name is good</td>
</tr>
</table>
为了完整起见:
#table_id td:nth-child(2) {white-space: nowrap;}
用于对table_id表的2列应用样式。
所有主流浏览器都支持这一点,IE从IE9开始支持这一点。
有几种方法可以做到这一点;这些方法都不是简单而明显的。
将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;你想要什么它就会怎样。
推荐文章
- 使伸缩项目正确浮动
- 如何取消最大高度?
- 形式内联内的形式水平在twitter bootstrap?
- 自定义元素在HTML5中有效吗?
- 如何选择在最后一个子元素之前的元素?
- 如何触发自动填充在谷歌Chrome?
- CSS变换,锯齿边缘在铬
- 创建圈div比使用图像更容易的方法?
- 强迫孩子服从父母的弯曲边界在CSS
- 为什么Chrome浏览器不正确地确定页面是在不同的语言,并提供翻译?
- 在CSS中@apply是什么?
- 在网页上用鼠标模拟震颤(例如帕金森病)?
- Bootstrap抛出Uncaught错误:Bootstrap的JavaScript需要jQuery
- 如何改变文本区域的边框颜色:焦点
- 我如何设置背景颜色为文本的宽度,而不是整个元素的宽度,使用CSS?