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

No Items Found.

Add Comment
Type in a Nick Name here
 
Page Views

This page has been viewed 461 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
I believe that success can be measured in the number of uncomfortable conversations you're willing to have.
Unknown