Html 如何使用CSS获得带有不同颜色主体的圆角表？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13243676/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to get a rounded corner table with a body in different color with CSS?
提问by Lucas
I need to make the following table with rounded corner and a table body with 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 should I do to get a table like the desired one?
我该怎么做才能得到一张想要的桌子？
Fiddle: http://jsfiddle.net/dQY9D/
回答by diEcho
Change structure of HTML and aplly below CSS
更改 HTML 的结构并在 CSS 下方应用
HTML
HTML
<div class="form_caja">
<table>
<thead><tr><td></td></tr></thead>
<tbody><tr><td></td></tr></tbody>
</table>
</div>
CSS
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 DEMOand apply as per your requirement
working DEMO根据您的要求查看并申请
回答by Diodeus - James MacFarlane
You need to create more classes for the inner tags, for example:
您需要为内部标签创建更多类，例如：
.form_caja td {
color:#ffffff;
}
?There are already many answerscovering this topic.
