title: Html multilines tables (rowspan) - how to zebra the right way?
body: <p>I've got the following table, with the first line containing 2 sub-lines and the second one containing 3 sublines.</p>
  
  <p>Whith this css style, the zebra color (<strong>i.e. alternate color on two consecutive rows</strong>) is faulty, second main cell shall be white, and not gray:</p>
  
  <pre><code> tr:nth-child(odd)  {background-color: #eee;}
   tr:nth-child(even) {background-color: #fff;}
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/zAT93.jpg" alt="Faulty zebra with nth-child css"></p>
  
  <p>So is there a way to zebra color such a table the right way?</p>
  
  <p>Of course, my real problem deals with much more rows, with a much more variable number of sub-lines.</p>
  
  <pre><code>&lt;head&gt;
      &lt;style&gt;
          tr:nth-child(odd)  {background-color: #eee;}
          tr:nth-child(even) {background-color: #fff;}
      &lt;/style&gt;
  &lt;head&gt;
  &lt;body&gt;
      &lt;table border="1"&gt;
          &lt;tr&gt;
              &lt;td rowspan="2"&gt;
                  Big1
              &lt;/td&gt;
              &lt;td&gt;
                  small1
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  small2
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td rowspan="3"&gt;
                  Big2
              &lt;/td&gt;
              &lt;td&gt;
                  small1
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  small2
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  small3
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt; 
  </code></pre>