html - 表格页脚上的边框半径属性中断

Question

我正在尝试制作一个带有圆 Angular 的表格，其页眉和页脚的颜色都与主表格不同。理想情况下，页眉和页脚都将从父表继承，但能够单独舍入页脚/页眉对我的目的来说没问题。

当前问题在此处突出显示:http://jsfiddle.net/VfVx9/

tfoot{
    background: #ff0000;
    border-radius: 20px;
}

在我看来，直接给页脚一个边框半径应该是圆 Angular 的，但这似乎不太奏效。有什么想法吗？

Answer 1

你为什么不这样做:

<div id="table">

<div class="head">
    Table head
</div>

<div class="tablerow">
    Table row content
</div>

<div class="tablerow">
    Table row content
</div>

<div class="footer">
    Table footer
</div>

然后:

#table {
background-color: blue;
width:200px;
border-radius: 10px;
}

#table div {
padding: 5px;  
}

#table .head {
background-color: green;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}

#table .footer {
background-color: red;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}

这是一个 fiddle :http://jsfiddle.net/VfVx9/