Optimizing a table - Twig, CSS

I have a table with forms in two colors - the first row is one color, the second is the other. Can you please tell me if there is a way to optimize my code (such as with this)?

I have two CSS classes:

tr.content1{  
    background-color: #EFF4FA; 
}

tr.content2{  
    background-color: #F7FAFD; 
}

And the table looks this way:

        Previous Plan:
        {{ form_row(form.prev_plan) }}
    
    
        Previous Server:
        {{ form_row(form.prev_srv) }}
    

There is also a problem this way - I get some text in the second column in front of the form field.

Depending on your requirements (is javascript allowed, which browsers can be used), I'd go for a CSS only solution.

CSS:

table.zebra tr:nth-child(odd) {  
    background-color: #EFF4FA; 
}

table.zebra tr:nth-child(even) {  
    background-color: #F7FAFD; 
}

PHP:

  
    Previous Plan:
    {{ form_row(form.prev_plan) }}
  
  
    Previous Server:
    {{ form_row(form.prev_srv) }}
  

Here's the catch:

You can't use these wonderfull selectors in every browser (IE < 9, I'm looking at you!). Only in most of them. There's a great explanation of the selector at w3c and an overview over browsers supporting it at caniuse.

And if you still want to use CSS3 selectors and need early IE support, there's javascript providing it (e.g. selectivizr - I never used it, but it's easy to find alternatives). Just search for "css3 selectors in IE" in your favorite search engine.

I guess this still doesn't solve your text overlay issues, but for that, you'd best point to an example page.

StackExchange Code Review Q#14294, answer score: 7