How to make a zebra list in this situation? with css-CodePudding

I have the following problem, using Angularjs and the tag because of the group loops, I have this situation. How to solve this list to get zebra correctly?

<table>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
</tbody>
<tbody>
    <tr><td>bbbbbbbb</td></tr>
</tbody>
    <tr><td>bbbbbbbb</td></tr>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
</tbody>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
</tbody>   
<tbody>
    <tr><td>bbbbbbbb</td></tr>
    
    <tbody>
    <tr><td>aaaaaaaa</td></tr>
    </tbody>
    <tbody>
    <tr><td>aaaaaaaa</td></tr>
    </tbody>
    <tbody>
    <tr><td>bbbbbbbb</td></tr>
    </tbody>
    <tbody>
    <tr><td>bbbbbbbb</td></tr>
    </tbody>
</table>

table tbody tr:nth-child(4n-1), table tbody tr:nth-child(4n 1)  {
    background: #ccc;
}

not working ..

CodePudding user response：

Use tbody at start and end of it not again and again with every row. tbody means table body thead means table head so a table have one body.

table tbody tr:nth-child(2n)  {
    background: #ccc;
}

<table>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>  
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>bbbbbbbb</td></tr>
</tbody>
</table>

CodePudding user response：

OPTION 1

If you have to style the HTML without changing the HTML structure as you've pasted it in (if it's dynamically loaded and you aren't able to edit the structure which I'll assume is the case), if you can add a couple of lines of JS, then I would try something like this:

var allTheTrs = document.querySelectorAll('tr');

for(var [index,tr] of allTheTrs.entries()){
  if(index % 2 == 1){
    tr.classList.add('color-me');
  }
}

.color-me {
  background: pink;
}

  <table>
  <tbody>
      <tr><td>aaaaaaaa</td></tr>
      <tr><td>aaaaaaaa</td></tr>
  </tbody>
  <tbody>
      <tr><td>bbbbbbbb</td></tr>
  </tbody>
      <tr><td>bbbbbbbb</td></tr>
  <tbody>
      <tr><td>aaaaaaaa</td></tr>
  </tbody>
  <tbody>
      <tr><td>aaaaaaaa</td></tr>
      <tr><td>bbbbbbbb</td></tr>
  </tbody>   
  <tbody>
      <tr><td>bbbbbbbb</td></tr>

      <tbody>
      <tr><td>aaaaaaaa</td></tr>
      </tbody>
      <tbody>
      <tr><td>aaaaaaaa</td></tr>
      </tbody>
      <tbody>
      <tr><td>bbbbbbbb</td></tr>
      </tbody>
      <tbody>
      <tr><td>bbbbbbbb</td></tr>
      </tbody>
  </table>

OPTION 2

But if you could edit the HTML, I would nest all of the <trs> in a single <tbody> like so:

<table>
<tbody>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>  
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>aaaaaaaa</td></tr>
    <tr><td>bbbbbbbb</td></tr>
    <tr><td>bbbbbbbb</td></tr>
</tbody>
</table>

and use this css rule to target either odd or even children:

table tr:nth-child(odd){
   background: pink;
}