CSS边框半径和边框合并

Question

我想在CSS中设置带有12px边框半径的表格。表格内的tr或td没有边框，只有整个表格周围的一个边框。我想让表格中的第一行具有上部2个角的边框半径，但是下部2个角没有（就像表格的标题）。我已经成功做到了。然而，这会在表格和第一行之间创建白色边框 - 我希望它们紧贴在一起，没有白色边框，因为标题行具有彩色背景。

我尝试使用border-collapse来解决这个问题，但这会取消整个表格的边框半径，使得标题行在上部2个角处呈圆形，但在方形表格内部。

这很难解释，因此可以在此处找到示例。您可以看到表格和具有蓝色背景的行之间的白色边框。

有人有什么想法可以在不使用border-collapse的情况下去掉边框吗？ 提前感谢您。

- crazyloonybin

Answer 1

尝试这个： <table class="admin" style = "border-spacing:0px;"> 显然，您可以将此内联样式拆分为其自己的类，但我想明确地告诉您，表格上的border-spacing是您想要的。

如果您不希望文本贴紧表格边框，则应在表格中的内容中添加一些填充。

- Matt

---

谢谢！之前从未听说过border-spacing！ - crazyloonybin

Answer 2

这是我的带修复的CSS：

table {
    border:1px solid black;
    border-radius: 5px; //Any radius you want. It will work perfectly!
    border-spacing: 0;
}
table td:first-child, table td:not(:first-child):not(:last-child){
    border-right:1px solid black;
}
table tr:first-child td, table tr:not(:last-child) td {
    border-bottom:1px solid black;
}

table thead tr:first-child  td:first-child {
    -webkit-border-top-left-radius: 2px;
    -moz-border-radius-topleft: 2px;
    border-top-left-radius: 2px;
}

table thead tr:first-child  td:last-child {
    -webkit-border-top-right-radius:2px;
    -moz-border-radius-topright: 2px;
    border-top-right-radius: 2px;
}
table tbody tr:last-child  td:first-child {
    -webkit-border-bottom-left-radius: 2px;
    -moz-border-radius-bottomleft: 2px;
    border-bottom-left-radius: 2px;
}

table tbody tr:last-child  td:last-child {
    -webkit-border-bottom-right-radius: 2px;
    -moz-border-radius-bottomright: 2px;
    border-bottom-right-radius: 2px;
}

- ovnia