CSS表格背景已四舍五入，但边框是平方的

Question

我正在尝试创建一个在两侧都有圆形顶部边框的表格，但是表格边框的其余部分都是平方的。

当我应用此CSS时，边框保持平方，但background-color 确实四舍五入，这会产生奇怪的外观：

table {border-collapse:collapse}
th {border-top:1px solid red; width:70px}
th, td {text-align:left; background-color:#cccccc}
th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px}
th.header2 {border-top:1px solid red; border-right:1px solid red; border-top-right-radius:20px}

结果如下：

如何围绕左上/右上标题单元格中的边框，以便红色边框跟随背景？

请参阅JSFiddle了解工作示例。

Answer 1

这是因为边框崩溃了：

<强> CSS

table {
    border-collapse: collapse;
}

请看quick fix。

Answer 2

变化：

   table {
    border-collapse: collapse;
}

为：

 table {
    border-collapse: separate;
    border-spacing: 0px 0px;
}

<强> DEMO

Answer 3

只需将边框属性分配给table tag，而不是将其分配给th tag和td tag，就可以解决这个问题。

table {
    background: #ccc;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    border-top: 1px solid red;
}
th {
    width: 70px;
}
th, td {
    text-align: left;
}

http://jsfiddle.net/Tomer123/z5832/9/

Answer 4

以这种方式使用代码：

table {border:collapse;}
th {border-top:1px solid red; width:70px}
th, td {text-align:left; background-color:#cccccc}
th.header1 {border-top:1px solid red; border-left:1px solid red; border-top-left-radius:20px}