logo标签列表

在HTML表格中右对齐文本的更好方法

htmlcss
71

我有一个包含大量行的HTML表格，我需要将其中一列右对齐。

我知道以下几种方法：

<tr><td>..</td><td>..</td><td align='right'>10.00</td><tr>

并且

<tr><td>..</td><td>..</td><td class='right-align-class'>10.00</td><tr>

在这两种方法中，我必须在每个标签上重复align或class参数。（如果有1000行，我必须1000次输入align='right'或class='right-align-class'）

有没有更有效的方法来解决这个问题？*是否有一种直接的方法，可以将所有行的第三列对齐到右侧？

3
我建议无论是什么生成HTML的工具，都应该在输出时添加正确的对齐方式，这样您就不必重复输入1000次。如果表格中有一千行，应该从程序上进行生成。这意味着您只需要在模板或生成HTML的代码中更改对齐方式，而且只需更改一次。这并不完全回答您的问题。但我知道我经常会发现自己做某些事情与其他人不太一样，这导致我提出了一些本来不需要问的问题。深入了解一层。 - Jason
13个回答
80

更新（10多年后！）：是的！现在可以更有效地完成这项工作，因为有广泛实用的浏览器支持，可以使用nth-child选择器。

HTML：

<table>
<tr>
<td>foo 1</td>
<td>bar 1</td>
<td>baz 1</td>
<td>bap 1</td>
</tr>
<tr>
<td>foo 2</td>
<td>bar 2</td>
<td>baz 2</td>
<td>bap 2</td>
</tr>
</table>

CSS：

table td { width: 20em; border: 1px solid black; }
table td:nth-child(3) { text-align: end; }

https://jsfiddle.net/mv83qszL/

以前做这件事是不可能的，因为浏览器支持以前非常不一致，特别是对于较新的CSS功能。这导致无法使用更优雅，更高效的解决方案——需要在整个受众的浏览器空间中使用大量重复的标记和类定义，才能获得一致的结果。

查看以前版本的编辑历史记录。

为什么这个会被点赞？他只是重复了原帖已经知道的方法。 - cdmckay
但这并不更有效率。为每个td添加一个类是最兼容的方法，但不是最有效率的方法。最有效率的方法是使用nth-child(3)选择器。 - cdmckay
这些使用IE6的人口中的10%都在哪里？我不认为我曾经遇到过其中任何一个。 - user1950164
IE6仍占有10%的浏览人口 - 而你仍然必须应对这个问题。 不...我不需要。使用IE6的人应该感到痛苦。 - nathanchere
5
@MattHowell: 这个很棒的回答看起来已经过时了（你的链接证明了你的文字有误，40%这一关键点已不再适用），你能否更新一下呢？ - Nikana Reklawyks
显示剩余2条评论
18
您可以使用 nth-child 伪选择器。例如：
table.align-right-3rd-column td:nth-child(3)
{
  text-align: right;
}

然后在你的表格中执行：

<table class="align-right-3rd-column">
  <tr>
    <td></td><td></td><td></td>
    ...
  </tr>
</table>

不幸的是，这只在Firefox 3.5中有效。但是，如果您的表格只有三列，您可以使用兄弟选择器，它具有更好的浏览器支持。以下是样式表的示例：

table.align-right-3rd-column td + td + td
{
  text-align: right;
}

这将匹配任何在两个其他列之前的列。

1
很遗憾，这不是一个非常兼容的解决方案。 - deceze
1
@cdmckay：实际上，在最新版本的Firefox、Opera、Chrome和Safari中应该可以工作。但不支持IE。 - DisgruntledGoat
有没有任何一个给我踩票的人能说一下这个答案哪里不对？ - cdmckay
9
如果始终是第三列，您可以使用此代码（假设表格类为“products”）。但这种方法有点巧妙，并且如果添加新列，则不够健壮。
table.products td+td+td {
  text-align: right;
}
table.products td,
table.products td+td+td+td {
  text-align: left;
}

但是说实话，最好的方法是在每个单元格上使用一个类。您可以使用col元素来设置列的宽度、边框、背景或可见性，但不能设置其他属性。原因在这里讨论。

如果在前面的某些列上使用变量colspan（或任何rowspan），也无法正常工作。 - user340140
5

浏览您的问题的确切表述，推断出您的隐含问题：

步骤1：按您所描述的使用该类（或者如果必须，使用内联样式）。

步骤2：启用 GZIP 压缩。

它的效果非常神奇 ;)

这样，GZIP 将为您消除冗余（无论在哪里）并保持源代码符合标准。

2
+1 打开 GZIP。说真的，这个答案不应该被踩三次。其他不太兼容的答案应该被投票否决。 - Adrian Godong
我并不是在任何情况下都主张使用内联样式表作为最佳解决方案。这只是解决问题的一种可能性。 - John Gietzen
1
+1，能不能解释一下为什么要踩？这个回答跟目前排名第一的回答没有任何区别，而且还是唯一一个明智的解决方案。 - Jan Zich
它是否“明智”取决于目标：原始问题似乎是关于语义重复而不是带宽，所以对我来说GZIP听起来不相关。FAQ中说SO上的负分是针对“离题或不正确”的答案。在我看来，仅仅因为“兼容性较差”而被downvote不应该成为downvote的理由，但GZIP处于边缘离题的地步。（顺便说一句，我没有在这个页面上downvote任何东西。）（再见，karma！我几乎不认识你了。） - Ken
@John：也许你应该将#1中的“或”一词加粗。 @Ken：GZIP会使其比不使用GZIP更高效（这是问题中的一个）。 - Adrian Godong
2

几年前（在只有IE的时代），我使用了<col align="right">标签，但我刚刚测试了一下，似乎这是IE独有的功能：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Test</title>
</head>
<body>
    <table width="100%" border="1">
        <col align="left" />
        <col align="left" />
        <col align="right" />
        <tr>
            <th>ISBN</th>
            <th>Title</th>
            <th>Price</th>
        </tr>
        <tr>
            <td>3476896</td>
            <td>My first HTML</td>
            <td>$53</td>
        </tr>
    </table>
</body>
</html>

该片段来自于www.w3schools.com。当然，它不应该被使用（除非你真的只针对IE渲染引擎），但我认为提及它是有趣的。
编辑： 总的来说，我不理解放弃这个标签的原因。至少对于手动HTML出版，它似乎非常有用。
1
有人真的在读我的回答吗？我并没有说它应该在真实的网站中使用。这只是一个历史性的评论，我建议仅在针对IE渲染引擎时使用（不一定是用于网页）。 - Jan Zich
1
Firefox在3.5版本中并没有取消支持，因为它从未支持过这个功能。 - Ken
2
我在12年后阅读了这篇文章 :-) 你还活着吗？我发现你的历史笔记非常重要，因为现今的标准缺乏对表格列语义的支持，迫使网页设计师变形设计，所以我在我的回答中添加了更多关于过去（和希望的未来）的注释。 - Jan Turoň
1
Jan Turoň: Probably not: "上次出现已经超过7年了". 这通常意味着该账户被废弃或遗失。 - Peter Mortensen
1

HTML5破坏了col属性的功能...

HTML5废弃了大部分col属性，并未添加对style和class属性的支持，这真的很不好。现代浏览器仍然支持其width属性, 但不支持其他属性。由于它在表格布局渲染算法中使用，因此宽度支持可能会继续保持。

...可以通过定义CSS类系列来解决问题...

为了实现类似的功能而无需编辑每一行，可以通过定义CSS类系列来实现。

.right-1 td:nth-child(1),
.right-2 td:nth-child(2),
.right-3 td:nth-child(3),
.right-4 td:nth-child(4),
.right-5 td:nth-child(5), ...
  { text-align: right; }

通过一些CSS预处理器/生成器，可以将其变成单行，但大多数Web表格都可以接受没有它。然后要将第三列右对齐，只需

<table class="right-3">
...
</table>

...但这只是一个糟糕的hack :-(

CSS类应该具有语义含义。如果它们暗示特定样式（如上面的例子），那么它就是将HTML与设计合并在一起的语义上合法化的内联style属性，而CSS应该将其分离。这就是Bootstrap样式所做的，也是您应该尽可能避免的。

0

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

th.price,
th.price || td {
    text-align: right;
}

当然，那并不能帮助我们解决当今的问题 —— 其他答案提供了足够的实用建议。
它被实现了吗？ - Peter Mortensen
0
如果您只有两种列样式 - 请将其中一种用作TD，另一种用作TH。然后，为表格声明一个类和一个子类，分别用于该表格的TH和TD。这样，您的HTML代码可以非常高效。
0

这在Internet Explorer 6中不起作用，可能是一个问题，但它将在Internet Explorer 7（或更高版本）、Firefox、Safari等浏览器中工作。它将把第三列右对齐，所有后续列左对齐。

td + td + td { text-align: right; }
td + td + td + td { text-align: left; }
如果我在第一个单元格中使用<td rowspan='2'>，它根本不起作用。 - user340140
0

在这个优秀的描述的基础上，这里提供了一个完整的解决方案，包括12列，同时包含<th>和<td>：


/* table column text alignment */
.col-r-1 td:nth-child(1),
.col-r-1 th:nth-child(1),
.col-r-2 td:nth-child(2),
.col-r-2 th:nth-child(2),
.col-r-3 td:nth-child(3),
.col-r-3 th:nth-child(3),
.col-r-4 td:nth-child(4),
.col-r-4 th:nth-child(4),
.col-r-5 td:nth-child(5),
.col-r-5 th:nth-child(5),
.col-r-6 td:nth-child(6),
.col-r-6 th:nth-child(6),
.col-r-7 td:nth-child(7),
.col-r-7 th:nth-child(7),
.col-r-8 td:nth-child(8),
.col-r-8 th:nth-child(8),
.col-r-9 td:nth-child(9),
.col-r-9 th:nth-child(9),
.col-r-10 td:nth-child(10),
.col-r-10 th:nth-child(10),
.col-r-11 td:nth-child(11),
.col-r-11 th:nth-child(11),
.col-r-12 td:nth-child(12),
.col-r-12 th:nth-child(12) {
  text-align: right;
}

.col-l-1 td:nth-child(1),
.col-l-1 th:nth-child(1),
.col-l-2 td:nth-child(2),
.col-l-2 th:nth-child(2),
.col-l-3 td:nth-child(3),
.col-l-3 th:nth-child(3),
.col-l-4 td:nth-child(4),
.col-l-4 th:nth-child(4),
.col-l-5 td:nth-child(5),
.col-l-5 th:nth-child(5),
.col-l-6 td:nth-child(6),
.col-l-6 th:nth-child(6),
.col-l-7 td:nth-child(7),
.col-l-7 th:nth-child(7),
.col-l-8 td:nth-child(8),
.col-l-8 th:nth-child(8),
.col-l-9 td:nth-child(9),
.col-l-9 th:nth-child(9),
.col-l-10 td:nth-child(10),
.col-l-10 th:nth-child(10),
.col-l-11 td:nth-child(11),
.col-l-11 th:nth-child(11),
.col-l-12 td:nth-child(12),
.col-l-12 th:nth-child(12) {
  text-align: left;
}

使用以下代码（将第二列和第三列右对齐）：

<table className="table text-left col-r-2 col-r-3">
    <thead>
        <tr>
            <th>Widget</th>
            <th>Quantity</th>
            <th>Price</th>
            <th>Comments</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th>Sprocket</th>
            <th>100</th>
            <th>$4.57</th>
            <th>Works well</th>
        </tr>
        <tr>
            <th>Rocket fuel</th>
            <th>7</th>
            <th>$114.57</th>
            <th>Spicy</th>
        </tr>
    </tbody>
</table>

使用Bootstrap，您可以全局对齐表格，使用text-right或text-left，然后调整不匹配整个表格的列；我想其他CSS框架也会有类似的功能。

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