CSS-在HTML标签中右对齐文本的更好方法
我有一个包含大量行的HTML表,并且我需要右对齐一列。
我知道以下方式,
....10.00
和
....10.00
在这两种方法中,我必须在每个2707093276355355724标记上重复align或class参数。 (如果有1000行,则必须将align ='right'或class ='right-align-class'放置1000次。)
有什么有效的方法吗? 有没有直接的说法,将所有行中的第三列右对齐?
Palani asked -01-17T20:30:55Z
11个解决方案
55 votes
直接回答您的问题:否。 没有任何简单的方法可以在所有现代浏览器中获得一致的外观,而无需重复本专栏中的类。 (尽管如此,请参阅以下re:nth-child。)
以下是执行此操作的最有效方法。
HTML:
CSS:
table.products td.price {
text-align: right;
}
为什么不应该使用nth-child:
CSS3伪选择器nth-child对此非常适合,并且效率更高,但是在当今的实际Web上使用是不切实际的。 几种主要的现代浏览器均不支持此功能,包括6-8的所有IE。 不幸的是,这意味着当今大部分浏览器(至少40%)不支持nth-child。
因此,nth-child很棒,但是如果您想要一致的外观和感觉,那么使用它是不可行的。
Matt Howell answered -01-17T20:31:32Z
12 votes
您可以使用nth-child伪选择器。 例如:
table.align-right-3rd-column td:nth-child(3)
{
text-align: right;
}
然后在表中执行以下操作:
...
编辑:
不幸的是,这仅在Firefox 3.5中有效。 但是,如果表只有3列,则可以使用兄弟选择器,该选择器具有更好的浏览器支持。 样式表如下所示:
table.align-right-3rd-column td + td + td
{
text-align: right;
}
这将匹配其他两列之后的任何列。
cdmckay answered -01-17T20:32:09Z
9 votes
如果始终是第三列,则可以使用它(假设表类为“产品”)。 但是,这有点怪异,如果添加新列,则不够健壮。
table.products td+td+td {
text-align: right;
}
table.products td,
table.products td+td+td+td {
text-align: left;
}
但老实说,最好的主意是在每个单元格上使用一个类。 您可以使用col元素设置列的宽度,边框,背景或可见性,但不能设置任何其他属性。 这里讨论的原因。
DisgruntledGoat answered -01-17T20:32:34Z
3 votes
浏览您的确切问题到您的隐含问题:
步骤1:使用您所描述的类(或者,如果需要,使用内联样式)。
步骤2:开启GZIP压缩。
创造奇迹;)
这样,GZIP可以为您消除冗余(无论如何通过网络),并且您的源仍然符合标准。
John Gietzen answered -01-17T20:33:12Z
0 votes
几年前(在IE中只有几天),我使用的是
标记,但我只是对其进行了测试,它似乎只是IE的一项功能:
/p>
"/TR/html4/loose.dtd">
Test
该片段摘自。 当然,不应使用它(除非出于某种原因您仅将IE渲染引擎作为目标),但是我认为提到它会很有趣。
编辑:
IE仍然支持它。
Firefox不再支持3.5。
Safari似乎不支持它,但是文档中另有说明。
总体而言,我不了解放弃此标签的原因。 这似乎很有用(至少对于手动HTML发布而言)。
Jan Zich answered -01-17T20:33:59Z
0 votes
这在IE6中不起作用,这可能是一个问题,但在IE7 +和Firefox,Safari等中将起作用。它将在第3列的右侧对齐,在所有后续列的左侧对齐。
td + td + td { text-align: right; }
td + td + td + td { text-align: left; }
Eifion answered -01-17T20:34:19Z
0 votes
如果您只有两种“种类”的列样式-将一种用作TD,将一种用作TH。 然后,为该表声明一个类,为该表的TH和TD声明一个子类。 这样,您的HTML就可以变得非常高效。
John Marno answered -01-17T20:34:39Z
0 votes
CSS Selectors Level 4的当前草案指定了网格的结构选择器。 如果实施,我们将能够执行以下操作:
th.price,
th.price || td {
text-align: right;
}
当然,今天这对我们没有帮助-这里的其他答案为此提供了足够的实用建议。
Chris answered -01-17T20:35:04Z
-1 votes
您真正想要的是:
但是Gecko似乎还不支持此功能:十多年来它一直是一个开放的错误。
(Geez,为什么Firefox无法像IE6那样拥有像样的标准支持?)
answered -01-17T20:35:32Z
-2 votes
使用jquery毫不干扰地将类应用于所有tr。
$(“ table td”)。addClass(“ right-align-class”);
如果要选择特定的td,请在td上使用增强型过滤器。
见jQuery
Nrj answered -01-17T20:36:05Z
-2 votes
驻留在表内的
和标签是为此目的而设计的。 如果表中有三列,并且要对齐第三列,请在打开
以及必要的CSS:
.your-right-align-class { text-align: right; }
从W3:
定义和用法
标记定义表中一个或多个列的属性值。标记可用于将样式应用于整个列,而不是为每一行的每一行重复样式。
supertrue answered -01-17T20:36:48Z