Question

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

我尝试使用border-collapse来执行此操作，但这会取消整个表格上的border-radius，使标题行在顶部2个角上舍入，但在平方表内。

这很难解释，因此可以找到一个例子here。您可以看到表格与蓝色背景的行之间的白色边框。

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

Answer 1

试试这个：

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

显然你可以将内联样式拉到自己的类中，但我想明确地告诉你，桌子上的边框间距是你所追求的。

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

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;
}

CSS边框半径和边框折叠

2 个答案: