simple table stripe striping

this uses the nth-child(even) element to add color striping to the following table

test table x       x
    x      
      x    
  x     x  
          x
x     x   x

HTML

<table style="border-collapse: collapse; width: 100%; height: 108px;" border="1">
<tbody>
<tr style="height: 18px;">
<td style="width: 16.6667%; height: 18px;">test table</td>
<td style="width: 16.6667%; height: 18px;">x</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">x</td>
</tr>
<tr style="height: 18px;">
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">x</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
</tr>
<tr style="height: 18px;">
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">x</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
</tr>
<tr style="height: 18px;">
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">x</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">x</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
</tr>
<tr style="height: 18px;">
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">x</td>
</tr>
<tr style="height: 18px;">
<td style="width: 16.6667%; height: 18px;">x</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">x</td>
<td style="width: 16.6667%; height: 18px;">&nbsp;</td>
<td style="width: 16.6667%; height: 18px;">x</td>
</tr>
</tbody>
</table>

CSS

tr:nth-child(even) {
  background: #CCCCCC;
}
test table x       x
    x      
      x    
  x     x  
          x
x     x   x

Other Items in css
Page Views

This page has been viewed 70 times.

Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code snippits here, mostly for my reference. Also if i find a good site, i usually add it here.

❤👩‍💻🕹

Random Quote
The happiest People don't have the best of everything, they just make the best of everything.
Unknown