CSS3的border-radius属性和border-collapse：collapse不要混合。 我怎样才能使用边界半径来创build一个圆angular的折叠表？

编辑 – 原标题：是否有另一种方法来实现border-collapse:collapse在CSS中border-collapse:collapse （为了有一个折叠，圆angular表）？

由于事实certificate，简单地让表格的边界崩溃并不能解决根本问题，我更新了标题以更好地反映讨论。

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

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

这是问题。 我也想设置border-collapse:collapse属性，当设置border-radius不再有效。 有没有一种基于CSS的方式，我可以得到与border-collapse:collapse相同的效果border-collapse:collapse而不实际使用它？

编辑：

我已经做了一个简单的页面来演示这个问题（仅适用于Firefox / Safari）。

似乎问题的很大一部分是设置表具有圆angular不影响angulartd元素的angular落。 如果桌子都是一种颜色的话，这个问题不会成为问题，因为我可以分别对第一行和最后一行进行四舍五入的顶部和底部tdangular。 不过，我使用不同的背景颜色来区分标题和条纹，所以内部的td元素也会显示它们的圆angular。

提议的解决scheme摘要：

用另一个带有圆angular的元素围着桌子不起作用，因为桌子的方angular“stream血”。

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

在将单元格间距设置为零之后，底部的拐angular仍然平方。

使用JavaScript代替 – 避免了这个问题。

可能的解决scheme：

这些表格是用PHP生成的，所以我可以对每个外部应用一个不同的类并分别对每个angular落进行样式设置。 我宁愿不这样做，因为它不是很优雅，适用于多个表是一个痛苦，所以请保持build议即将到来。

可能的解决scheme2是使用JavaScript（特别是jQuery）来设置angular点的样式。 这个解决scheme也可以，但仍然不是我所期待的（我知道我很挑剔）。 我有两个保留：

1. 这是一个非常轻量级的网站，我想保持最低限度的JavaScript
2. 使用边界对我的吸引力的一部分是优雅的退化和渐进的增强。 通过对所有圆angular使用边界半径，我希望在CSS3function的浏览器中拥有一致的四舍五入网站，并且在其他网站（我在看你，IE）中有一致的方形网站。

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

Answer 1

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

四舍五入的问题是，td元素也没有变圆。 你可以通过这样做来解决这个问题：

 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的问题border-collapse: collapse破坏一切。 解决方法是在html中设置cellspacing="0" （谢谢Joel ）。

Answer 2

下面的方法是可行的（在Chrome中进行testing），通过使用1px而不是“真实”边框的box-shadow 。

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

Answer 3

如果你想要一个纯CSS的解决scheme（不需要在HTML中设置cellspacing=0 ），允许1px的边界（你不能用border-spacing: 0解决scheme），我更喜欢做下面的事情：

• 为表格单元格（ td和th ）设置一个border-right和border-bottom ，
• 给第一行中的单元格设置一个border-top
• 给第一列中的单元格border-left
• 使用第first-child和last-childselect器，围绕四angular的表格单元的适当angular落。

在这里看到一个演示。

鉴于以下HTML：

看下面的例子：

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

 <div class="custom-table"> <table> <tr> <th>item1</th> <th>item2</th> </tr> <tr> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> </tr> <tr> <td>item1</td> <td>item2</td> </tr> </table> </div> 

Answer 4

你有没有尝试过使用table{border-spacing: 0}而不是table{border-collapse: collapse} ？

Answer 5

您可能需要在桌子周围放置另一个元素，并使用圆形边框来设置样式。

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

Answer 6

正如伊恩所说，解决scheme是将表格嵌套在一个div中，并将其设置为：

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

overflow:hidden ，方形的angular落不会通过divstream血。

Answer 7

据我所知，唯一的办法就是修改所有的单元格，如下所示：

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

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

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

:last-child在ie6中是无效的，但是如果你使用border-radius我假设你不在乎。

编辑：

看了你的例子页面后，看起来你可以用单元格间距和填充来解决这个问题。

您所看到的厚厚的灰色边框实际上是表格的背景（如果将边框颜色更改为红色，则可以清楚地看到这一点）。 如果将单元格间距设置为零（或等同于： td, th { margin:0; } ），则灰色的“边框”将消失。

编辑2：

我找不到只有一个表的方法。 如果将标题行更改为嵌套表格，则可能可以获得所需的效果，但这样做会更有效，而不是dynamic的。

Answer 8

我尝试了一个使用伪元素的解决方法:before and :after the the thead th:first-child and the the thead th:last-child

结合使用<div class="radius borderCCC">包装表格

 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）让我知道这是否适用于其他浏览器。

Answer 9

对于有界和可滚动的表，使用这个（replacevariables， $起始文本）

如果你使用thead ， tfoot或th ，只要把tr:first-child和tr-last-child和tdreplace成它们。

 #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：

 <div id=table-wrap> <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> </div> 

Answer 10

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

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

Answer 11

给定的答案只有在桌子周围没有边界时才起作用，这是非常有限的！

我在SASS有一个macros来做这个，它完全支持外部和内部的边界，实现与边界崩溃相同的样式：崩溃而没有实际指定它。

在FF / IE8 / Safari / Chrome中testing。

在所有浏览器中，在纯CSS中给出漂亮的圆angular边框，但IE8（优雅地降级），因为IE8不支持border-radius 🙁

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

这个答案并不是最短的 – 但它的工作原理。

 .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> 

标记为以下内容：

 <table class="roundedTable"> 

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

希望这可以帮助。

Answer 12

我只是写了一个疯狂的一套CSS，这似乎是完美的工作：

 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 !*/ 

Answer 13

带边框折叠的解决scheme：为表格和显示单独分隔：用于tbody和thead的inline-table。

 table { width: 100%; border-collapse: separate; border-spacing: 0px; background: transparent; } table thead { display: inline-table; width: 100%; background: #fc0 url(..http://img.dovov.combg-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; } 

Answer 14

我是新的HTML和CSS，我也正在寻找这个解决scheme，在这里，我发现。

 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 } 

我尝试一下，猜猜它是怎么工作的:)

Answer 15

遇到同样的问题后发现这个答案，但发现它非常简单：只要给表溢出：隐藏

不需要包装元素。 当然，我不知道7年前这个问题最初是否可以解决，但现在起作用了。

Answer 16

我开始尝试“显示”，我发现：在一个table中的border-radius ， border ， margin ， padding ，显示：

 display: inline-table; 

例如

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

但是我们需要设置每一列的width

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

Answer 17

这是一个最近的例子，如何从http://medialoot.com/preview/css-ui-kit/demo.html实现一个圆angular的表格。; 它基于上面的Joel Potterbuild议的特殊select器。 正如你所看到的，它也包含了一些让IE有点快乐的魔法。 它包括一些额外的样式来replace行的颜色：

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

Answer 18

我总是用萨斯这样做。

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

Answer 19

其实你可以添加你的table在一个div作为它的包装。 然后将这些CSS代码分配给包装器：

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

Answer 20

边界半径现在正式支持。 所以，在上面的所有例子中，你可以删除“-moz-”前缀。

另一个诀窍是使用相同的颜色的顶部和底部的行和你的边界。 所有3种颜色都是相同的，即使不是物理上的，它也可以混合成一张完美的圆形桌子。