html - CSS 3's border-radius property and border-collapse:collapse don' t 混合。如何使用border-radius创建一个圆 Angular 折叠表？

Question

Edit - Original Title: 有没有另一种方法可以在 CSS 中实现 border-collapse:collapse(为了有一个折叠的，圆 Angular 表)？

事实证明，简单地让表格的边框折叠并不能解决根本问题，我更新了标题以更好地反射(reflect)讨论。

我正在尝试使用 CSS3 border-radius 属性制作圆 Angular 表格。我使用的表格样式如下所示:

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

这就是问题所在。我还想设置 border-collapse:collapse 属性，当设置时 border-radius 不再起作用。有没有一种基于 CSS 的方法可以在不实际使用的情况下获得与 border-collapse:collapse 相同的效果？

编辑:

我做了一个简单的页面来演示这个问题here (仅限 Firefox/Safari)。

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

建议解决方案总结:

用另一个圆 Angular 元素围绕表格不起作用，因为表格的方 Angular “渗出”。

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

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

改用 JavaScript - 可以避免问题。

可能的解决方案:

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

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

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

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

Answer 1

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

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

    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 破坏一切的问题。

解决方法是 add border-spacing: 0并将默认的border-collapse:separate留在 table 上。