如何使用CSS获得带有不同颜色的主体的圆角桌？

Question

我需要制作下表,圆角和不同颜色的表体:

这是我的表:

<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>

这是风格:

.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;
}

这是我到目前为止所得到的:

如何获得所需的表格呢？

小提琴:http://jsfiddle.net/dQY9D/

Answer 1

改变HTML的结构,并在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}

​

working DEMO根据您的要求查看并申请