html - 如何使用行样式修复边界半径？

Question

我正在使用一些 CSS 来尝试为一张带有弧形 Angular 的 table 设计样式。但是底部的边框(白色) Angular 在底部表格行上断开。基本上它在视觉上看起来像是左下角和右下角的尖端溢出圆 Angular 。

这是一个工作示例: http://cssdeck.com/labs/6mpl631w

有什么建议吗？

.table {
width: 100%;
background-color: #3F3F3F;
color:#EDEDED;
display: block;    
border-width: 1px;
border-style: solid;
padding: 0px;
border-radius: 7px 7px 7px 7px;
-moz-border-radius: 7px 7px 7px 7px;
-webkit-border-radius: 7px 7px 7px 7px;

}
.table > thead > tr > th,
.table > thead > tr > td,
.table > tfoot > tr > th,
.table > tfoot > tr > td {

    padding: 8px 12px;
    }
    .table > thead > tr > th,
    .table > thead > tr > td {
        font-weight: bold;
        font-size: 15px;
    }
    .table > tfoot > tr > th,
    .table > tfoot > tr > td {
        border-top: 1px solid #cccccc;
    }
.table > tbody > tr > th,
.table > tbody > tr > td {
    padding: 8px 12px;

    border-top: 1px solid #e6e6e6;
    }
    .table > tbody > tr:first-child > th,
    .table > tbody > tr:first-child > td {
        border-top-color: #cccccc;
    }
    .table > thead,
    .table > tbody > tr > th,
    .table > tfoot > tr > th {
        text-align: left;
    }

    .table > tbody > tr:nth-child(even) {
        background: #373737;
    }
    .table > tbody > tr.even {
        background: #373737;
    }

    .table > tbody > tr:hover {
        background: #4F4F4F;
    }

Answer 1

添加这个:

.table {
    overflow: hidden;
}

Demo