CSS3的border-radius属性和border-collapse：collapse不能混合使用。如何使用边框半径创建带有圆角的折叠表格？

Question

编辑-原标题： 是否有其他方式来实现border-collapse:collapse的CSS（为了有倒塌，圆角表）？

事实证明，仅使表格的边框折叠起来并不能解决根本问题，所以我更新了标题以更好地反映讨论内容。

我正在尝试 使用该CSS3 border-radius属性 制作带有圆角的表 。我正在使用的表格样式如下所示：

table {
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    border-radius:10px
}

这是问题所在。我也想设置该border-collapse:collapse属性，并且设置该属性border- radius后将不再起作用。有没有一种基于CSS的方式可以获得与border-collapse:collapse不实际使用相同的效果？

编辑：

我做了一个简单的页面来演示该问题在这里（只火狐/Safari浏览器）。

看来问题的很大一部分是将表设置为具有圆角不会影响Cornertd元素的角。如果桌子全是一种颜色，那将不是问题，因为我可以td分别使第一行和最后一行的上角和下角变圆。但是，我在表中使用了不同的背景色来区分标题和条纹，因此内部td元素也将显示其圆角。

拟议解决方案摘要：

用另一个带有圆角的元素包围桌子是行不通的，因为桌子的四角“渗漏了”。

将边框宽度指定为0不会折叠表格。

底部td四角设置CELLSPACING零后仍然广场。

相反，使用JavaScript可以避免此问题。

可能的解决方案：

这些表是用PHP生成的，因此我可以将一个不同的类应用于每个外部th/tds并分别设置每个角的样式。我不希望这样做，因为它不是很优雅，并且要应用于多个表有点麻烦，所以请继续提出建议。

可能的解决方案2是使用JavaScript（特别是jQuery）对角进行样式设置。此解决方案也可以使用，但仍然不是我想要的（我知道我很挑剔）。我有两个保留意见：

1. 这是一个非常轻量级的网站，我希望将JavaScript保持在最低水平
2. 使用边界半径对我来说具有吸引力的一部分是优美的退化和渐进的增强。通过对所有圆角使用border-radius，我希望在支持CSS3的浏览器中拥有一个一致的圆形站点，并在其他浏览器中拥有一个一致的正方形站点（我在看着您，IE）。

我知道今天尝试使用CSS3似乎没有必要，但是我有自己的理由。我还要指出的是，此问题是w3c规范的结果，而不是对CSS3的支持不佳，因此，当CSS3得到更广泛的支持时，任何解决方案都仍然是相关且有用的。

Answer 1

我想到了。您只需要使用一些特殊的选择器即可。

圆角化表格的问题是td元素也没有变圆。您可以通过执行以下操作来解决此问题：

table tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

现在一切正常，除了仍然存在border-collapse: collapse破坏所有内容的问题。

一种解决方法是在表上添加border-spacing: 0默认值并保留默认值border-collapse: separate。