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

我正在尝试使用 CSS 制作一个带有圆角的表格border-radius财产。我使用的表格样式看起来像这样：

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

问题就在这里。我也想设置border-collapse:collapse属性，以及何时设置border-radius不再有效。有没有一种基于 CSS 的方法可以获得与border-collapse:collapse没有实际使用它？

看来很大一部分问题是把桌子设置成圆角并不会影响墙角的角td元素。如果桌子都是一种颜色，这不会是问题，因为我可以只制作顶部和底部td第一行和最后一行的角分别为圆角。但是，我对表格使用不同的背景颜色来区分标题和条纹，因此内部td元素也会显示它们的圆角。

用另一个带圆角的元素包围桌子是行不通的，因为桌子的方角会“渗透”。

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

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

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

我想在不使用 JavaScript 的情况下完成此操作。

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

将桌子的角弄圆的问题是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打破一切。

解决方法是add border-spacing: 0 https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing并保留默认值border-collapse: separate在桌子上。