Geek Answers Handbook

Html multiline tables (rowspan) - how to choose a zebra?

I have the following table: the first line contains 2 substrings, and the second contains 3 substrings.

In this css style, the color of the zebra ( i.e., the alternating color on two consecutive lines ) is faulty, the second main cell should be white, not gray:

tr:nth-child(odd) {background-color: #eee;} tr:nth-child(even) {background-color: #fff;}

Faulty zebra with nth-child css

So, is there a way to correctly change the color of such a table?

Of course, my real problem is with a much larger number of lines with a much more variable number of substrings.

 <head> <style> tr:nth-child(odd) {background-color: #eee;} tr:nth-child(even) {background-color: #fff;} </style> <head> <body> <table border="1"> <tr> <td rowspan="2"> Big1 </td> <td> small1 </td> </tr> <tr> <td> small2 </td> </tr> <tr> <td rowspan="3"> Big2 </td> <td> small1 </td> </tr> <tr> <td> small2 </td> </tr> <tr> <td> small3 </td> </tr> </table> </body>
+7
source share
1 answer

It works the way it is laid out.

It does not work like

  <tr> <td rowspan="2"> Big1 </td> <td> small1 </td> </tr>

will be gray, this is the first TR (odd)

  <tr> <td> small2 </td> </tr>

will be white, second TR (even), etc.

The best way to do this is to assign the “odd” and “even” classes to the tr in question manually.

+1
source

More articles:


All Articles