table 每隔两行将文本对齐设置为右对齐

Question

我想创建一个 table，其中第一行的背景为灰色，第二行的文本对齐设置为右对齐，这将重复进行。

Grey background
Right
Grey bg
Right
...

我已经制作了灰色行，但是如何让每一行右对齐？我什至尝试使用以下代码在灰色行上右对齐：

.p-table tr:nth-child(even) {
  background-color: #f1f1f1;
  text-align:right;
}

但文本对齐方式没有改变。

有什么办法吗？

Answer 1

您可能需要将文本对齐放在 <td> 元素而不是行上：

.p-table tr:nth-child(even) {
  background-color: #f1f1f1;
}

.p-table tr:nth-child(odd) td {
  text-align:right;
}

td 或任何实际包含您的文本的元素

Answer 2

您已经有一个 nth-child(even) CSS 选择器，所以您只需要一个 nth-child(odd) 选择器。 nth-child(even) 选择器将控制文本对齐方式，而 nth-child(odd) 将控制背景颜色。下面是一些示例代码：

li:nth-child(odd) {
    background-color: grey
}
li:nth-child(even) {
    text-align: right;
}

在没有看到您的 HTML 代码的情况下，我无法为您提供与您的 HTML 匹配的确切 CSS，因此您必须根据自己的需要调整上述代码HTML.

Answer 3

你可以使用这个：

table tr:nth-child(odd){
   background-color: grey
}
table tr:nth-child(even){
   text-align: right;
}

Set text-align to right every second row of a table