CSS Alternate Rows - some rows hidden

Question

I\'m trying to style a table so that each row is a different colour (odd/even). I have the following CSS:

#woo tr:nth-child(even) td {
    background-color: #f0f         


        

Answer 1

I solved this issue using a background image for the table that consisted of the two alternate colors. This makes for not-quite-a-full-CSS solution as it involves creating an image, but it should scale very well for tables with thousands of entries.

The background-image in the base64 encoding below is a 1x50 image with the top 25 pixels as one color and the bottom 25 pixels as the alternate color.

table {
  border-collapse: collapse;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAyCAIAAAASmSbdAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3wQbATAssXhCIwAAABl0RVh0Q29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAYSURBVAjXY/j8/joTAwMDTfGXDzdpbQcATuQF2Ze0VigAAAAASUVORK5CYII=);
}
  
td {
   padding: 2px 4px;
   height: 21px;
}

    

        

            
ANIMAL!!
        
        

            
Beaker
        
        

            
Bunsen Honeydew, Ph.D.
        
        

            
Camilla the Chicken
        
        

            
Dr. Julius Strangepork
        
        

            
Dr. Teeth
        
        

            
Floyd Pepper
        
        

            
Gonzo
        
        

            
Janice
        
        

            
Miss Piggy
        
        

            
Rizzo
        
        

            
Robin the Frog
        
        

            
Sam the Eagle
        
        

            
Statler
        
        

            
The Swedish Chef
        
        

            
Waldorf
        
        

            
Zoot