[英]How to add rounded corners to a table
It was my understanding that tables can have webkit border radius styles as other elements do: 据我所知,表可以像其他元素一样具有webkit边框半径样式:
HTML HTML
<table class="list-table">
<thead>
<tr>
<th>header</th>
</tr>
</thead>
<tbody>
<tr>
<td>tables are misunderstood</td>
</tr>
</tbody>
</table>
CSS CSS
.list-table {
width: 100%;
padding: 0;
margin: 0;
text-align: center;
vertical-align: middle;
border: 4px solid red;
border-collapse: collapse;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
... so where am I going wrong? ......所以我哪里错了? See here for a live demo: http://bootply.com/79469# 在这里观看现场演示: http : //bootply.com/79469#
Get rid of the border-collapse: collapse;
摆脱border-collapse: collapse;
rule. 规则。
Put your table in a div and do your border radius on the div and not the table 把你的桌子放在div中,然后在div而不是桌子上做你的边框半径
http://bootply.com/79471 http://bootply.com/79471
div {
border: 4px solid red;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.