2013-01-10 26 views
0

我有一个类似于下面的代码的结构。当表格对于内容容器来说太高时,它会隐藏溢出内容。我的问题是可见表格的底角是方形的,尽管它的容器div的下角是圆角的。有没有办法在桌子底部和容器底部之间没有间隙的情况下将底部四舍五入?当表溢出div的圆角?

这里有一个演示来重现问题 http://www.jsbin.com/ohejor/1/edit

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

和CSS,因为当你声明border-radiusdiv.container

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

有关设置一个最大高度的容器是什么? – diegoperini

回答

1

的问题是,你应该在容器上设置溢出-Y,而不是表:

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

谢谢!溢出-y正是我所寻找的,尽管我使用:隐藏而不是:auto来隐藏滚动条。 – ejfrancis

0

table的边角正方形,你的避风港对于table没有这样做。

为了圆的边角table

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

为了防止div.containertable之间的间距:

​​
+0

问题是没有让表具有边框。问题在于表格的底部没有显示,“底部”仅仅是最低的,它没有被overflow:auto隐藏,所以它是一个方形的角落。我试图实现的是使用外部容器作为一种面具来切断底部角落。 – ejfrancis

+0

@ejfrancis - 啊。你能否提供一个证明问题的例子?我真的不能猜测你的内容是什么...... – KatieK

+0

这里是一个演示,请注意容器在点击按钮之前有一个圆角,但在与方角交叠之后http://jsbin.com/ohejor/1 /编辑 – ejfrancis

0

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