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
Related Search Terms
Page Views

This page has been viewed 216 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
Ever tried. Ever failed. No matter. Try again. Fail again. Fail better. You won't believe what you can accomplish by attempting the impossible with the courage to repeatedly fail better.
Unknown