Malphai Malphai - 7 months ago 19
HTML Question

Ignoring <tr> tag with nth-child css

I have a pretty complex situation here so I am going to try my best to explain.

I have this table with

<tr>
and
<td>
html tags and I want every user displayed to be sorted with 2 different css
background-color
.

The problem is that I have another
<tr>
tag where the date is displayed for every user, so when trying to use these elements with
tr:nth-child(even)
and
tr:nth-child(odd)
it will not work.

So how should I do to make this work? I tried with selecting with different intervalls as you can see here, with no result.

Note: The first user should always start with white
background-color
.

#tblRegister tr:nth-child(2n-4) {
background-color: #eee;
}

#tblRegister tr:nth-child(3n-1) {
background-color: #fff;
}


Here is an image to further explain how it should be:

enter image description here

Answer Source

Like i said previously in my comment, i would change my html structure to apply the nth-child rule like so:

<table>
  <tr class="big_row">
    <td>Hello</td>
  </tr>
  <tr class="son_table_cnt">
    <td>
      <table class="son_table">
          <tr class="normal_row">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr class="normal_row">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr class="normal_row">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
          <tr class="normal_row">
            <td>1</td>
            <td>2</td>
            <td>3</td>
            <td>4</td>
          </tr>
      </table>
    </td>
  </tr>
</table>

I know that nested tables are a pain, but i cannot think of another solution. Maybe someone else can come up with a better one without changing the structure

You can find a working example here https://jsfiddle.net/qzL7kgev/ (css is a bit messy cause i layed it down quickly, but i hope you get the point)