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
}