Search code examples
csscss-tables

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?

Solution

  • 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