关于html：CSS3的border-radius属性和border-collapse：collapse不要混用。如何使用border-radius创建带圆角的折叠表？

CSS3's border-radius property and border-collapse:collapse don't mix. How can I use border-radius to create a collapsed table with rounded corners?

编辑 - 原始标题：是否有另一种方法可以在CSS中实现border-collapse:collapse(为了拥有折叠的圆角表)？

因为事实证明只是让表格的边框崩溃并不能解决根本问题，所以我更新了标题以更好地反映讨论。

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

1
2
3
4
5

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

这是问题所在。我还想设置border-collapse:collapse属性，当设置border-radius时不再有效。是否有基于CSS的方式我可以获得与border-collapse:collapse相同的效果而不实际使用它？

编辑：

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

看起来很大一部分问题是将表设置为圆角不会影响角落td元素的角落。如果表格都是一种颜色，这不会是一个问题，因为我可以分别为第一行和最后一行分别顶部和底部td角。但是，我使用不同的背景颜色来区分标题和条纹，因此内部td元素也会显示其圆角。

建议的解决方案摘要：

桌子周围有另一个圆角的元素不起作用，因为桌子的方角"渗透"。

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

将cellspacing设置为零后，底部td角仍然是正方形。

使用JavaScript代替 - 避免问题。

可能的解决方案：

这些表是用PHP生成的，所以我可以为每个外部的t / tds应用一个不同的类，并分别为每个角设置样式。我宁愿不这样做，因为它不是很优雅，并且应用于多个表格有点痛苦，所以请保持建议。

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

这是一个非常轻量级的网站，我希望将JavaScript保持在最低限度

使用border-radius对我来说具有优雅降级和渐进增强的部分吸引力。通过对所有圆角使用border-radius，我希望在支持CSS3的浏览器中拥有一致的圆形网站，在其他浏览器中拥有一致的方形网站(我正在看着你，IE)。

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

相关讨论

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

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

1
2
3
4
5
6
7

table tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}

table tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}

现在一切正常，除了仍然存在border-collapse: collapse打破一切的问题。解决方法是在html中设置cellspacing="0"(谢谢，Joel)。

相关讨论

以下方法通过使用box-shadow的扩展1px而不是"真实"边框来工作(在Chrome中测试)。

1
2
3
4
5
6
7
8
9
10

table {
border-collapse: collapse;
border-radius: 30px;
border-style: hidden; /* hide standard table (collapsed) border */
box-shadow: 0 0 0 1px #666; /* this draws the table border */
}

td {
border: 1px solid #ccc;
}

相关讨论

如果你想要一个只有CSS的解决方案(不需要在HTML中设置cellspacing=0)，允许1px边框(你不能用border-spacing: 0解决方案)，我更喜欢做以下事情：

为表格单元格设置border-right和border-bottom(td和th)
给第一行中的单元格border-top
给第一列中的单元格border-left
使用first-child和last-child选择器，围绕四个角中的表格单元格的相应角。

在这里看一个演示。

给出以下HTML：

请参见下面的示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

.custom-table{margin:30px;}
table {
border-collapse: separate;
border-spacing: 0;
min-width: 350px;

}
table tr th,
table tr td {
border-right: 1px solid #bbb;
border-bottom: 1px solid #bbb;
padding: 5px;
}
table tr th:first-child, table tr th:last-child{
border-top:solid 1px #bbb;}
table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;

}
table tr th:first-child,
table tr td:first-child {
border-left: 1px solid #bbb;
}
table tr th {
background: #eee;
text-align: left;
}

table.Info tr th,
table.Info tr:first-child td
{
border-top: 1px solid #bbb;
}

/* top-left border-radius */
table tr:first-child th:first-child,
table.Info tr:first-child td:first-child {
border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th:last-child,
table.Info tr:first-child td:last-child {
border-top-right-radius: 6px;
}

/* bottom-left border-radius */
table tr:last-child td:first-child {
border-bottom-left-radius: 6px;
}

/* bottom-right border-radius */
table tr:last-child td:last-child {
border-bottom-right-radius: 6px;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

相关讨论

您是否尝试使用table{border-spacing: 0}而不是table{border-collapse: collapse} ???

相关讨论

您可能需要在表格周围放置另一个元素并使用圆形边框进行样式设置。

工作草案指定当border-collapse的值为collapse时，border-radius不适用于表元素。

相关讨论

正如Ian所说，解决方案是将表嵌套在div中并将其设置为：

1
2
3
4

.table_wrapper {
border-radius: 5px;
overflow: hidden;
}

使用overflow:hidden时，方角不会通过div流血。

相关讨论

据我所知，你能做到的唯一方法是修改所有单元格，如下所示：

1
2
3
4

table td {
border-right-width: 0px;
border-bottom-width: 0px;
}

然后在底部和右后方获得边框

1
2
3
4
5
6

table tr td:last-child {
border-right-width: 1px;
}
table tr:last-child td {
border-bottom-width: 1px;
}

:last-child在ie6中无效，但如果您使用border-radius，我认为您不在乎。

编辑：

查看您的示例页面后，您似乎可以使用单元格间距和填充来解决此问题。

您看到的厚灰色边框实际上是表格的背景(如果将边框颜色更改为红色，则可以清楚地看到这一点)。如果将cellspacing设置为零(或等效地：td, th { margin:0; })，则灰色"边框"将消失。

编辑2：

我只能用一张桌子找不到办法。如果您将标题行更改为嵌套表，您可能可以获得所需的效果，但它将更多工作，而不是动态。

相关讨论

我尝试使用thead th:first-child和thead th:last-child上的伪元素:before和:after进行解决

与用包裹桌子相结合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

table thead th:first-child:before{
content:"";
position:absolute;
top:-1px;
left:-1px;
width:15px;
height:15px;
border-left:1px solid #ccc;
border-top:1px solid #ccc;
-webkit-border-radius:5px 0px 0px;
}
table thead th:last-child:after{
content:"";
position:absolute;
top:-1px;
right:-1px;
width:15px;
height:15px;
border-right:1px solid #ccc;
border-top:1px solid #ccc;
-webkit-border-radius:0px 5px 0px 0px;
}

见jsFiddle

适用于我的Chrome(13.0.782.215)让我知道这是否适用于其他浏览器。

实际上，您可以在div中添加table作为其包装。然后将这些CSS代码分配给包装器：

1
2
3
4
5
6
7
8
9

.table-wrapper {
border: 1px solid #f00;
border-radius: 5px;
overflow: hidden;
}

table {
border-collapse: collapse;
}

我有同样的问题。
完全删除border-collapse并使用：
cellspacing="0" cellpadding="0"
在html文档中。
例：

1	<table class="top_container" align="center" cellspacing="0" cellpadding="0">

相关讨论

我刚刚写了一套疯狂的CSS，看起来效果很好：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

table {
border-collapse: separate;
border-spacing: 0;
width: 100%;
}
table td,
table th {
border-right: 1px solid #CCC;
border-top: 1px solid #CCC;
padding: 3px 5px;
vertical-align: top;
}
table td:first-child,
table th:first-child {
border-left: 1px solid #CCC;
}
table tr:last-child td,
table tr:last-child th {
border-bottom: 1px solid #CCC;
}
table thead + tbody tr:first-child td {
border-top: 0;
}
table thead td,
table th {
background: #EDEDED;
}

/* complicated rounded table corners! */
table thead:first-child tr:last-child td:first-child {
border-bottom-left-radius: 0;
}
table thead:first-child tr:last-child td:last-child {
border-bottom-right-radius: 0;
}
table thead + tbody tr:first-child td:first-child {
border-top-left-radius: 0;
}
table thead + tbody tr:first-child td:last-child {
border-top-right-radius: 0;
}
table tr:first-child td:first-child,
table thead tr:first-child td:first-child {
border-top-left-radius: 5px;
}
table tr:first-child td:last-child,
table thead tr:first-child td:last-child {
border-top-right-radius: 5px;
}
table tr:last-child td:first-child,
table thead:last-child tr:last-child td:first-child {
border-bottom-left-radius: 5px;
}
table tr:last-child td:last-child,
table thead:last-child tr:last-child td:last-child {
border-bottom-right-radius: 5px;
}

/* end complicated rounded table corners !*/

对于带边框和可滚动的表，使用此(替换变量，$起始文本)

如果您使用thead，tfoot或th，只需将tr:first-child和tr-last-child以及td替换为它们。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

#table-wrap {
border: $border solid $color-border;
border-radius: $border-radius;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
table td { border: $border solid $color-border; }
table td:first-child { border-left: none; }
table td:last-child { border-right: none; }
table tr:first-child td { border-top: none; }
table tr:last-child td { border-bottom: none; }
table tr:first-child td:first-child { border-top-left-radius: $border-radius; }
table tr:first-child td:last-child { border-top-right-radius: $border-radius; }
table tr:last-child td:first-child { border-bottom-left-radius: $border-radius; }
table tr:last-child td:last-child { border-bottom-right-radius: $border-radius; }

HTML：

1
2
3
4
5
6
7
8
9
10

给定的答案仅在表格周围没有边框时才起作用，这是非常有限的！

我在SASS中有一个宏来完成这项工作，它完全支持外部和内部边框，实现与边框折叠相同的样式：折叠而不实际指定它。

在FF / IE8 / Safari / Chrome中测试过。

在所有浏览器中为纯CSS提供漂亮的圆形边框，但IE8(优雅地降级)因为IE8不支持border-radius :(

某些旧版浏览器可能需要供应商前缀才能使用border-radius，因此可以根据需要随意将这些前缀添加到代码中。

这个答案不是最短的 - 但它确实有效。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

.roundedTable {
border-radius: 20px / 20px;
border: 1px solid #333333;
border-spacing: 0px;
}
.roundedTable th {
padding: 4px;
background: #ffcc11;
border-left: 1px solid #333333;
}
.roundedTable th:first-child {
border-left: none;
border-top-left-radius: 20px;
}
.roundedTable th:last-child {
border-top-right-radius: 20px;
}
.roundedTable tr td {
border: 1px solid #333333;
border-right: none;
border-bottom: none;
padding: 4px;
}
.roundedTable tr td:first-child {
border-left: none;
}

要应用此样式，只需更改您的

<table>

标记为以下内容：

1	<table class="roundedTable">

并确保在HTML中包含上述CSS样式。

希望这可以帮助。

相关讨论

边界折叠的解决方案：表和显示分开：tbody和thead的内联表。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

table {
width: 100%;
border-collapse: separate;
border-spacing: 0px;
background: transparent;
}
table thead {
display: inline-table;
width: 100%;
background: #fc0 url(../images/bg-heading.png) repeat-x 0% 0;
-webkit-border-top-left-radius: 7px;
-moz-border-radius-topleft: 7px;
-webkit-border-top-right-radius: 7px;
-moz-border-radius-topright: 7px;
border-radius: 7px 7px 0px 0px;
padding: 1px;
padding-bottom: 0;
}

table tbody {
border: 1px solid #ddd;
display: inline-table;
width: 100%;
border-top: none;
}

相关讨论

我是HTML和CSS的新手，我也在寻找解决方案，我在这里找到了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

table,th,td {
border: 1px solid black;
border-spacing: 0
}
/* add border-radius to table only*/
table {
border-radius: 25px
}
/* then add border-radius to top left border of left heading cell */
th:first-child {
border-radius: 25px 0 0 0
}
/* then add border-radius to top right border of right heading cell */
th:last-child {
border-radius: 0 25px 0 0
}
/* then add border-radius to bottom left border of left cell of last row */
tr:last-child td:first-child {
border-radius: 0 0 0 25px
}
/* then add border-radius to bottom right border of right cell of last row */
tr:last-child td:last-child {
border-radius: 0 0 25px 0
}

我试试看，猜猜它的作用:)

遇到同样的问题后找到了这个答案，但发现它很简单：只需给表溢出：隐藏

不需要包装元素。当然，我不知道7年前这个问题最初会被问到是否会起作用，但它现在有效。

相关讨论

带圆角和带边框的桌子。
使用@Ramon Tayag解决方案。

关键是使用border-spacing: 0指出。

使用SCSS的解决方案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

$line: 1px solid #979797;
$radius: 5px;

table {
border: $line;
border-radius: $radius;
border-spacing: 0;
th,
tr:not(:last-child) td {
border-bottom: $line;
}
th:not(:last-child),
td:not(:last-child) {
border-right: $line;
}
}

我开始尝试"显示"，我发现：border-radius，border，margin，padding，在table中显示：

1	display: inline-table;

例如

1
2
3
4
5
6
7

table tbody tr {
display: inline-table;
width: 960px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

但我们需要设置每列的width

1
2
3
4
5
6

tr td.first-column {
width: 100px;
}
tr td.second-column {
width: 860px;
}

相关讨论

以下是如何使用http://medialoot.com/preview/css-ui-kit/demo.html中的圆角实现表格的最新示例。它基于Joel Potter上面提出的特殊选择器。正如你所看到的，它还包括一些使IE变得有点快乐的魔力。它包含一些额外的样式来交替行的颜色：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

table-wrapper {
width: 460px;
background: #E0E0E0;
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#E9E9E9', endColorstr='#D7D7D7');
background: -webkit-gradient(linear, left top, left bottom, from(#E9E9E9), to(#D7D7D7));
background: -moz-linear-gradient(top, #E9E9E9, #D7D7D7);
padding: 8px;
-webkit-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-moz-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-o-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-khtml-box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
box-shadow: inset 0px 2px 2px #B2B3B5, 0px 1px 0 #fff;
-webkit-border-radius: 10px;
/*-moz-border-radius: 10px; firefox doesn't allow rounding of tables yet*/
-o-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;
margin-bottom: 20px;
}
.table-wrapper table {
width: 460px;
}
.table-header {
height: 35px;
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: center;
line-height: 34px;
text-decoration: none;
font-weight: bold;
}
.table-row td {
font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
text-align: left;
text-decoration: none;
font-weight: normal;
color: #858585;
padding: 10px;
border-left: 1px solid #ccc;
-khtml-box-shadow: 0px 1px 0px #B2B3B5;
-webkit-box-shadow: 0px 1px 0px #B2B3B5;
-moz-box-shadow: 0px 1px 0px #ddd;
-o-box-shadow: 0px 1px 0px #B2B3B5;
box-shadow: 0px 1px 0px #B2B3B5;
}
tr th {
border-left: 1px solid #ccc;
}
tr th:first-child {
-khtml-border-top-left-radius: 8px;
-webkit-border-top-left-radius: 8px;
-o-border-top-left-radius: 8px;
/*-moz-border-radius-topleft: 8px; firefox doesn't allow rounding of tables yet*/
border-top-left-radius: 8px;
border: none;
}
tr td:first-child {
border: none;
}
tr th:last-child {
-khtml-border-top-right-radius: 8px;
-webkit-border-top-right-radius: 8px;
-o-border-top-right-radius: 8px;
/*-moz-border-radius-topright: 8px; firefox doesn't allow rounding of tables yet*/
border-top-right-radius: 8px;
}
tr {
background: #fff;
}
tr:nth-child(odd) {
background: #F3F3F3;
}
tr:nth-child(even) {
background: #fff;
}
tr:last-child td:first-child {
-khtml-border-bottom-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
-o-border-bottom-left-radius: 8px;
/*-moz-border-radius-bottomleft: 8px; firefox doesn't allow rounding of tables yet*/
border-bottom-left-radius: 8px;
}
tr:last-child td:last-child {
-khtml-border-bottom-right-radius: 8px;
-webkit-border-bottom-right-radius: 8px;
-o-border-bottom-right-radius: 8px;
/*-moz-border-radius-bottomright: 8px; firefox doesn't allow rounding of tables yet*/
border-bottom-right-radius: 8px;
}

我总是这样使用Sass

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

table {
border-radius: 0.25rem;
thead tr:first-child th {
&:first-child {
border-top-left-radius: 0.25rem;
}
&:last-child {
border-top-right-radius: 0.25rem;
}
}
tbody tr:last-child td {
&:first-child {
border-bottom-left-radius: 0.25rem;
}
&:last-child {
border-bottom-right-radius: 0.25rem;
}
}
}

相关讨论

现在正式支持Border-radius。因此，在上述所有示例中，您可以删除"-moz-"前缀。

另一个技巧是使用与边框相同的颜色作为顶部和底部行。所有3种颜色相同，它融合在一起，看起来像一个完美的圆桌，即使它不是物理的。