html - 如何使用 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}

​</p>

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

Answer 2

您需要为内部标签创建更多类，例如：

.form_caja td {
   color:#ffffff;    
}

​已经有很多关于这个话题的答案。