Установить выравнивание текста вправо каждой второй строки таблицы

Question

Я хочу создать таблицу, в которой первая строка будет иметь серый фон, а вторая строка будет иметь выравнивание текста вправо, и это будет повторяться.

Grey background 
Right 
Grey bg 
Right 
... 

Я уже сделал серый ряд, но как сделать выравнивание вправо в каждом втором ряду? Я даже попытался сделать правильный Align на сером ряду с этим кодом:

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

Но текст выравнивание не меняется.

Есть ли способ, как это сделать?

** EDIT: ** В каждой строке есть div (с классом w3-container от w3.css), а содержимое строки находится в div.

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-код, я не могу дать вам точный CSS, который будет соответствовать вашим HTML, так что вам придется адаптировать код выше с HTML.

Answer 3

Вы можете использовать это:

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