CSS和HTML的问题-边框半径和背景颜色

Question

我在一些设计上遇到了一个小问题。问题是，桌子顶部或底部一行的背景色似乎"挂在"边缘。我认为背景颜色仍然适用于桌子风格，但我一辈子都无法理解（我不是设计师！）。Jfiddle here:

http://jsfiddle.net/UFcqB/

HTML:

<div class="stats_table">
        <table cellspacing="0">
            <tr class="tablehead">
                <th>ID</th>
                <th>Name</th>
                <th>Contact Person</th> 
                <th>Contact Number</th>
                <th>Email Address</th>
                <th>Status</th>
                <th>Location</th>
                <th class="modify">Options</th>
            </tr>
            <tr class="second_row">
                <td>1</td>
                <td>Test Agency cc.</td><td>John Doe</td>
                <td>0112131232</td>
                <td><a target="_blank" href="mailto:[e-mail]">[e-mail]</a>    </td>
                <td>Active</td>
                <td>Hatfield</td>
                <td class="modify">
                    <a onclick="return false;" href="#"><img title="View Agency Details" src="img/icons/list_small.png"></a>
                    <a onclick="return false;" href="#"><img title="Disable Agency" src="img/icons/delete_small.png"></a>
                </td>
            </tr>
        </table>
</div>

CSS：

table {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #E2E2E2;
    border-collapse: separate;
    border-radius: 20px 20px 20px 20px;
    moz-border-radius: 20px 20px 20px 20px;
    box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
    line-height: 1;
    font-size: 12px;
    width: 100%;
}
th {
    padding: 5px 10px 5px 10px;
}
td {
    padding: 5px 10px 5px 10px;
    text-align: left;
}
.tablehead {
    background-color: #E9E9EA;
    color: #747070;
    text-align: left;
}
.second_row {
    background-color: #DFEFFC;
}

谢谢你的帮助！

Answer 1

如果添加：

 overflow: hidden;

对于表的CSS，它将隐藏行的角。

Answer 2

请在此处查看：http://jsfiddle.net/balintbako/UAVxB/

您必须将边界半径添加到拐角上的<th>和<td>。

这里有一个相当长的对话（我把css从这里复制到小提琴上）：CSS3'；s边界半径属性和边界塌陷：塌陷don'；t混合。如何使用边界半径创建圆角折叠表？

Answer 3

这是因为表的顶部边框有一个半径因子，而第一行的顶部仍然有尖锐的边框，它们相互覆盖。如果出于某种原因不想使用溢出，可以将radius元素放在表和确切的tr下，并记住将半径放在一个固定的数字上，如5px，而不是2%，这样两个边界的形状都相同，就不会有这个问题。