0

I have also tried using below codes. it doesn't work for this case.

String Text 

table>tbody>tr>td:nth-child(odd){
    background-color: #F2F2F2;
}
table>tbody>tr:nth-child(odd){
    background-color: #FFF !important;
}
table>tbody>tr>td:nth-child(even){
    background-color: #F7F7F7;
}
Vikrant
  • 4,920
  • 17
  • 48
  • 72
Manoj prabhakar R
  • 1
  • 1
  • 2
  • 4
    Can you add your markup – Geeky Nov 21 '16 at 07:44
  • 1
    Possible duplicate of [Alternate table row color using CSS?](http://stackoverflow.com/questions/3084261/alternate-table-row-color-using-css) – Daniel Nov 21 '16 at 07:47
  • Post your code with [code Snippet](https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/) It will be more helpful to get issue with your code. – TIGER Nov 21 '16 at 07:52

2 Answers2

6

Alternating rows

See the difference: we are using odd and even on tr, not td:

table>tbody>tr:nth-child(odd) >td{
    background-color: #eee;
}
table>tbody>tr:nth-child(even)>td{
    background-color: #ccc;
}
<table>
  <tbody>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> 
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
  </tbody>
</table>

It seems this first part was answered here:
Alternate table row color using CSS?


Alternating rows and columns:

If you want the "doubled" alternate, extend the concept to all combinations:

table>tbody>tr:nth-child(odd)> td:nth-child(odd) {background-color:#aaa}
table>tbody>tr:nth-child(odd)> td:nth-child(even){background-color:#888}
table>tbody>tr:nth-child(even)>td:nth-child(odd) {background-color:#eee}
table>tbody>tr:nth-child(even)>td:nth-child(even){background-color:#ddd}
<table>
  <tbody>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr> 
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
    <tr><td>. . . . .</td><td>. . . . .</td><td>. . . . .</td></tr>
  </tbody>
</table>
Community
  • 1
  • 1
Berin do CD
  • 789
  • 13
  • 23
0

Your column css has overridden the row css. Hence changed them for odd and even rows separately as below.

table>tbody>tr:nth-child(odd){
    background-color: #F7F7F7 !important;
}

table>tbody>tr:nth-child(even){
    background-color: #FFF !important;
}

table>tbody>tr:nth-child(odd)>td:nth-child(odd){
    background-color: #F2F2F2 !important;
}
table>tbody>tr:nth-child(odd)>td:nth-child(even){
    background-color: #F7F7F7;
}

table>tbody>tr:nth-child(even)>td:nth-child(odd){
    background-color: #FFF !important;
}
table>tbody>tr:nth-child(even)>td:nth-child(even){
    background-color: #F2F2F2;
}
<table>
  <tbody>
    <tr>
      <td>Row 1 Column 1</td>
      <td>Row 1 Column 2</td>
      <td>Row 1 Column 3</td>
    </tr>
    <tr>
      <td>Row 2 Column 1</td>
      <td>Row 2 Column 2</td>
      <td>Row 2 Column 3</td>
    </tr>
    <tr>
      <td>Row 3 Column 1</td>
      <td>Row 3 Column 2</td>
      <td>Row 3 Column 3</td>
    </tr>
    <tr>
      <td>Row 4 Column 1</td>
      <td>Row 4 Column 2</td>
      <td>Row 4 Column 3</td>
    </tr>
  </tbody>
</table>
Aruna
  • 11,959
  • 3
  • 28
  • 42