I am trying to create a Zebra table where each Zebra "Strip" consists of two
rows. I am using a classical table to create the Zebra table. In my CSS, I
have
..dark {
background-color: #00FFFF;
}
..light {
background-color: #CCFFFF;
}
<tr class="light ">
<td class="name">Name</td>
<td class="addr">Street</td>
<td class="email">Email</td>
<td class="interest">Interests</td>
</tr>
<tr class="light ">
<td>Spouse</td>
<td>Telephone</td>
<td>Spouse Email</td>
<td>Spouse Interests</td>
</tr>
<tr class="dark">
<td class="name">Joe</td>
<td class="addr">Elm</td>
<td class="email">Something</td>
<td class="interest">More</td>
</tr>
<tr class="dark">
<td>Jane</td>
<td>999 999-9999</td>
<td>Something Email</td>
<td>Something Interests</td>
</tr>
I would to wrap the two rows in a single definition, like with a <divor a
<spanbut having been able to make that work.
<div class="light">
<tr>
<td class="name">Name</td>
<td class="addr">Street</td>
<td class="email">Email</td>
<td class="interest">Interests</td>
</tr>
<tr class="light ">
<td>Spouse</td>
<td>Telephone</td>
<td>Spouse Email</td>
<td>Spouse Interests</td>
</tr>
</div>
<div class="dark">
<tr>
<td class="name">Joe</td>
<td class="addr">Elm</td>
<td class="email">Something</td>
<td class="interest">More</td>
</tr>
<tr class="dark">
<td>Jane</td>
<td>999 999-9999</td>
<td>Something Email</td>
<td>Something Interests</td>
</tr>
</div>
Appreciate your help. Thanks...
Bruce
