CSS3 的border-radius 属性和border-collapse:collapse 不能混用如何使用border- radius创建一个圆角折叠表？

如何解决CSS3 的border-radius 属性和border-collapse:collapse 不能混用如何使用border- radius创建一个圆角折叠表？

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

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

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

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


<table>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        2
      </td>
    </tr>
    <tr>
      <td>
        3
      </td>
      <td>
        4
      </td>
    </tr>
  </tbody>
</table>

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

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

解决方法

编辑 - 原标题： 有没有其他方法可以实现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不实际使用它相同的效果？

编辑：

我制作了一个简单的页面来演示这里的问题（仅限
Firefox/Safari）。

似乎很大一部分问题在于将表格设置为圆角不会影响角td元素的角。如果表格都是一种颜色，这不会有问题，因为我可以td分别将第一行和最后一行的顶角和底角圆角。但是，我为表格使用不同的背景颜色来区分标题和条纹，因此内部td元素也会显示它们的圆角。

建议的解决方案摘要：

用另一个圆角元素围绕桌子不起作用，因为桌子的方角“渗出”。

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

td将单元格间距设置为零后，底角仍然是方形的。

改用 JavaScript 可以避免问题。

可能的解决方案：

这些表是用 PHP 生成的，所以我可以对每个外部 th/tds
应用不同的类并分别设置每个角的样式。我宁愿不这样做，因为它不是很优雅，而且应用于多个表有点痛苦，所以请不断提出建议。

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

1. 这是一个非常轻量级的网站，我希望将 JavaScript 保持在最低限度
2. 使用边界半径对我的部分吸引力是优雅的退化和渐进的增强。通过对所有圆角使用边框半径，我希望在支持 CSS3 的浏览器中拥有一个始终如一的圆形站点，在其他浏览器中拥有一个始终如一的方形站点（我在看着你，IE）。

我知道今天尝试用 CSS3 来做这件事似乎没有必要，但我有我的理由。我还想指出，这个问题是 w3c 规范的结果，而不是糟糕的 CSS3 支持，所以当
CSS3 得到更广泛的支持时，任何解决方案仍然是相关和有用的。