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">Na me</td>
<td class="addr">St reet</td>
<td class="email">E mail</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">Jo e</td>
<td class="addr">El m</td>
<td class="email">S omething</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">Na me</td>
<td class="addr">St reet</td>
<td class="email">E mail</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">Jo e</td>
<td class="addr">El m</td>
<td class="email">S omething</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
