Soaku Soaku - 3 months ago 12
CSS Question

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

I want to create a table, where first row will have grey background and second row will have text-align set to right and this will be repeated.

Grey background
Right
Grey bg
Right
...


I already made the grey row, but how to make the right align every second row? I have even tried making right align on the grey row with this code:

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


But the text align doesn't change.

Is there any way how to do it?

**EDIT: ** In every row, there is a div (with class
w3-container
from w3.css) and the content of row is in the div.

Answer

You probably need to put the text-align on your <td> element rather than the row:

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

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

td or whatever element actually contains your text