html - テーブルがdivをオーバーフローしたときの角が丸い？

Question

私は以下のコードのような構造を持っています。テーブルがコンテンツコンテナに対して高すぎる場合、オーバーフローコンテンツを非表示にします。私の問題は、コンテナdivの下部の角が丸くなっているにもかかわらず、表示されているテーブルの下部の角が正方形であるということです。テーブルの下部とそのコンテナdivの下部の間にギャップを入れずに下部を丸める方法はありますか？

これが問題を再現するためのデモです http://www.jsbin.com/ohejor/1/edit

<div class='container'>
<table>
    ....table populated by php pulling from mysql table
</table>
</div>

とCSS

table{ overflow:auto;}
.container{ position:relative; height:75%;  border-radius:0px 0px 5px 5px;}

Answer 1

問題は、テーブルではなくコンテナにoverflow-yを設定する必要があることです。

table{}
.container{ position:relative; height:75%; border-radius:0px 0px 5px 5px; overflow-y: auto}

Answer 2

のコーナーtableは正方形です。これは、の宣言を行っているのにborder-radius、の宣言をdiv.container行っていないためですtable。

table角を曲がるには：

table { border: solid red 1px; border-radius: 0px 0px 5px 5px; }

との間の間隔を防ぐためdiv.containerにtable：

.container { padding: 0px;}

Answer 3

border-collapse: collapseテーブルセレクターに追加すると役立つはずです。