3

我正在尝试在 CSS 中设置一个边框半径为 12px 的表格。表格中的 tr 或 td 没有边框，只有一个边框围绕整个批次。我希望表格中的第一行在前 2 个角上具有边框半径，但在底部 2 上没有边框半径（所以它就像表格的标题），我已经设法做到了。但是，这会在表格和第一行之间创建一个白色边框 - 我希望它们在没有白色边框的情况下相互对齐，因为标题行具有彩色背景。

我尝试使用边框折叠来执行此操作，但这会抵消整个表格上的边框半径，使标题行在顶部 2 个角处变圆，但在方形表格内。

这很难解释，所以可以在这里找到一个例子。您可以看到表格和蓝色背景的行之间的白色边框。

有没有人知道如何在没有边界崩溃的情况下摆脱边界？提前致谢

4

2 回答 2

6

试试这个：

<table class="admin" style = "border-spacing:0px;">

显然，您可以将该内联样式提取到它自己的类中，但我想明确地向您展示表格上的边框间距是您所追求的。

如果您不希望文本紧贴表格的边框，您应该/可以为表格内的内容添加一些填充。

于 2012-10-24T18:43:37.190 回答
0

这是我的修复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;
}
于 2013-05-02T13:24:15.100 回答