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

Question

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

当前问题在这里突出显示：http: //jsfiddle.net/VfVx9/

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

在我看来，直接给页脚一个边界半径应该是圆角，但这似乎并不奏效。有任何想法吗？

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;
}

这是一个小提琴：http: //jsfiddle.net/VfVx9/

Answer 2

我相信这取决于您使用的浏览器，试试这个：

tfoot{
  background: #ff0000;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

Answer 3

http://jsfiddle.net/JLyrp/

.test {
    background: #0000ff;
    border-radius: 10px;
    width: 100px;
}
tfoot {
    background: #ff0000;
    border-radius:20px;
    display:block  //float or position:absolute also works
}