我需要制作下面的圆 Angular 表格和表格主体 不同颜色:
这是我的 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>
这是风格:
.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;
}
这是我目前得到的:
我应该怎么做才能得到一张想要的 table ?
fiddle :http://jsfiddle.net/dQY9D/
最佳答案
改变 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
并根据您的要求申请
关于html - 如何使用 CSS 获得主体颜色不同的圆 Angular table ?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13243676/