Optimizing a table - Twig, CSS

Question

:) 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?

I have two CSS classes:

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

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

And the table looks this way:

    <tr class="content1">
        <td>Previous Plan:</td>
        <td>{{ form_row(form.prev_plan) }}</td>
    </tr>
    <tr class="content2">
        <td>Previous Server:</td>
        <td>{{ form_row(form.prev_srv) }}</td>
    </tr>

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

I would be really grateful if someone tell me how to fix and optimize that. :) Maybe something with https://github.com/symfony/symfony/blob/master/src/Symfony/Bridge/Twig/Resources/views/Form/form_table_layout.html.twig but I'm not sure if it will be better? Thank you very much in advance! :)

Answer 1

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:

<table class="zebra">
  <tr>
    <td>Previous Plan:</td>
    <td>{{ form_row(form.prev_plan) }}</td>
  </tr>
  <tr>
    <td>Previous Server:</td>
    <td>{{ form_row(form.prev_srv) }}</td>
  </tr>
</table>

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.