How to get a rounded corner table with a body of different colors with CSS?

Question

I need to make the following table with a rounded corner and the body of the table with a different color:

This is my table:

<table class="form_caja"> <tr><th>Referidos</th></tr> <tr><td>Numero</td><td>Companhia</td><td>Nombre</td><td>Apellido</td><td>Email</td></tr> <tr><td>0976343344</td><td>PERSONAL</td><td>f</td><td>asd</td><td></td></tr> <tr><td>0992123123</td><td>CLARO</td><td>dA</td><td>de</td><td></td></tr> <tr><td>0963555457</td><td>CLARO</td><td>f</td><td>sdf</td><td></td></tr> <tr><td>0963555345</td><td>CLARO</td><td>e</td><td>de</td><td></td></tr> </table> 

and this is the style:

 .form_caja { width: 524px; padding-top: 8px; padding-bottom: 15px; margin: 0 auto 20px auto; background: #446bb3; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; color: #446bb3; } 

this is what i get so far:

How can I make the table look as it should?

Thanks in advance! Fiddle: http://jsfiddle.net/dQY9D/

Answer 1

Change the structure of HTML and aplly below CSS

HTML

 <div class="form_caja"> <table> <thead><tr><td></td></tr></thead> <tbody><tr><td></td></tr></tbody> </table> </div> 

CSS

 form_caja { width: 524px; padding-top: 8px; padding-bottom: 15px; margin: 0 auto 20px auto; background-color: #446bb3; border-radius: 15px; -moz-border-radius: 15px; -webkit-border-radius: 15px; color: #446bb3; padding:10px; } table { background-color : #fff; color : #453} thead { background-color: #446bb3 ; color :#fff; padding:4px; line-height:30px } tbody tr:nth-child(even) {background: #CCC} tbody tr:nth-child(odd) {background: #FFF} 

see working DEMO and apply as per your requirement

Answer 2

You need to create more classes for internal tags, for example:

 .form_caja td { color:#ffffff; } 

There are already answers to many questions on this topic.