html字段靠右对齐,CSS-在HTML标签中右对齐文本的更好方法

CSS-在HTML标签中右对齐文本的更好方法

我有一个包含大量行的HTML表，并且我需要右对齐一列。

我知道以下方式，

....10.00

和

....10.00

在这两种方法中，我必须在每个2707093276355355724标记上重复align或class参数。 (如果有1000行，则必须将align ='right'或class ='right-align-class'放置1000次。)

有什么有效的方法吗？ 有没有直接的说法，将所有行中的第三列右对齐？

Palani asked 2020-01-17T20:30:55Z

11个解决方案

55 votes

直接回答您的问题：否。 没有任何简单的方法可以在所有现代浏览器中获得一致的外观，而无需重复本专栏中的类。 (尽管如此，请参阅以下re：nth-child。)

以下是执行此操作的最有效方法。

HTML：

...	...	10.00	...	...
...	...	11.45	...	...

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 2020-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 2020-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 2020-01-17T20:32:34Z

3 votes

浏览您的确切问题到您的隐含问题：

步骤1：使用您所描述的类(或者，如果需要，使用内联样式)。

步骤2：开启GZIP压缩。

创造奇迹;)

这样，GZIP可以为您消除冗余(无论如何通过网络)，并且您的源仍然符合标准。

John Gietzen answered 2020-01-17T20:33:12Z

0 votes

几年前(在IE中只有几天)，我使用的是

标记，但我只是对其进行了测试，它似乎只是IE的一项功能：

/p>

"http://www.w3.org/TR/html4/loose.dtd">

Test

ISBN	Title	Price
3476896	My first HTML	$53

该片段摘自www.w3schools.com。 当然，不应使用它(除非出于某种原因您仅将IE渲染引擎作为目标)，但是我认为提到它会很有趣。

编辑：

IE仍然支持它。

Firefox不再支持3.5。

Safari似乎不支持它，但是文档中另有说明。

总体而言，我不了解放弃此标签的原因。 这似乎很有用(至少对于手动HTML发布而言)。

Jan Zich answered 2020-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 2020-01-17T20:34:19Z

0 votes

如果您只有两种“种类”的列样式-将一种用作TD，将一种用作TH。 然后，为该表声明一个类，为该表的TH和TD声明一个子类。 这样，您的HTML就可以变得非常高效。

John Marno answered 2020-01-17T20:34:39Z

0 votes

CSS Selectors Level 4的当前草案指定了网格的结构选择器。 如果实施，我们将能够执行以下操作：

th.price,

th.price || td {

text-align: right;

}

当然，今天这对我们没有帮助-这里的其他答案为此提供了足够的实用建议。

Chris answered 2020-01-17T20:35:04Z

-1 votes

您真正想要的是：

但是Gecko似乎还不支持此功能：十多年来它一直是一个开放的错误。

(Geez，为什么Firefox无法像IE6那样拥有像样的标准支持？)

answered 2020-01-17T20:35:32Z

-2 votes

使用jquery毫不干扰地将类应用于所有tr。

$(“ table td”)。addClass(“ right-align-class”);

如果要选择特定的td，请在td上使用增强型过滤器。

见jQuery

Nrj answered 2020-01-17T20:36:05Z

-2 votes

驻留在表内的

和标签是为此目的而设计的。 如果表中有三列，并且要对齐第三列，请在打开

以及必要的CSS：

.your-right-align-class { text-align: right; }

从W3：

定义和用法

标记定义表中一个或多个列的属性值。标记可用于将样式应用于整个列，而不是为每一行的每一行重复样式。

supertrue answered 2020-01-17T20:36:48Z