表格溢出div时的圆角？答案

【问题标题】：Rounded corner when table overflows div?表格溢出div时的圆角？
【发布时间】：2012-12-25 10:38:16
【问题描述】：

我的结构类似于下面的代码。当表格对于内容容器来说太高时，它会隐藏溢出的内容。我的问题是可见表的底角是方形的，尽管它的容器 div 的下角是圆形的。有没有办法在表格底部和容器 div 底部之间不留空隙的情况下使底部变圆？

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

【问题讨论】：

【解决方案1】：

问题是你应该在容器而不是表上设置溢出-y：

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

【讨论】：

【解决方案2】：

border-collapse: collapse 添加到表格选择器应该会有所帮助。

【讨论】：

【解决方案3】：

table 的角是方形的，因为虽然您已经为 div.container 声明了 border-radius，但您还没有为 table 声明。

圆角table：

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

为了防止div.container 和table 之间出现空格：

.container { padding: 0px;}

【讨论】：