有没有更简洁的方法让 html 列全部对齐=正确？

Posted 2023-03-06

【中文标题】有没有更简洁的方法让 html 列全部对齐=正确？

【英文标题】：Is there a more succinct way to have an html column all align=right?

【发布时间】：2014-05-27 14:13:27

【问题描述】：

除了将align="right" 放在每一行之外，还有更简洁的方法可以让 html 表格列右对齐吗？

是否有任何 html 或 css 我可以在一个地方指定它以避免每一行上的 html？

<tr>
   <td align='right'>Col1</td>
   <td>Col2</td>
 </tr>
<tr>
   <td align='right'>Col1</td>
   <td>Col2</td>
</tr>
<tr>
   <td align='right'>Col1</td>
   <td>Col2</td>
</tr>
<tr>
   <td align='right'>Col1</td>
   <td>Col2</td>
</tr>

【问题讨论】：

是的；使用基本的 CSS 类。 （或了解col 元素）

你试过css td text-align: right; 吗？

@Hidde 将使所有 td 文本向右

【参考方案1】：

您需要的是:nth-child，或者您可以使用:first-child

table tr td:first-child 
   text-align: right;

这会将text-align: right; 应用于每个tr 中的每个第一个 td

Demo

Demo （没什么不同，用color表示目标元素）

---

我在这里使用通用元素选择器，因此如果您要定位单个 table，最好在 table 上声明 class 并使用类似的选择器

table.class_name tr td:first-child 
    /* Styles goes here */

【讨论】：

我正在使用:first-child 以获得更大的 IE 兼容性。

可以省略table tr部分。

@Alohci 保持流程...... \@salman 后来让我眨了眨眼：-D

【参考方案2】：

使用 CSS 伪类选择器 nth-child(n)

CSS

table tr td:nth-child(1) 
  text-align: right;

检查这个Demo jsFiddle

---

CSS

table tr td 
  text-align: right;

检查这个Demo jsFiddle

---

使用 CSS text-align: right 属性，

<td class='rightside'>text to be aligned to right</td>

<style>
      .rightside text-align: right; 
</style>

【讨论】：

在简洁性方面有什么更好的地方？