Question

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

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

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

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

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

编辑：

我做了一个简单的页面来演示问题here（仅适用于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得到更广泛的支持时，任何解决方案仍然具有相关性和实用性。

Answer 1

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

圆角的问题是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仍然存在打破一切的问题。解决方法是在html中设置cellspacing="0"（谢谢，Joel）。

Answer 2

使用展开box-shadow而不是“真正”边框的1px，以下方法适用（在Chrome中测试）。

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的解决方案（不需要在HTML中设置cellspacing=0）允许1px边框（你不能用border-spacing: 0解决方案），我更喜欢执行以下操作：

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

See a demo here.

给出以下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-radius的值为border-collapse时，working draft指定collapse不适用于表格元素。

Answer 6

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

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

使用overflow:hidden时，方角不会在div中流血。

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，我认为您不在乎。

修改

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

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

编辑2：

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

Answer 8

我尝试使用:before和:after

上的伪元素thead th:first-child和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

实际上，您可以在public static IEnumerable<T> Iterate<T>(T seed, Func<T, T> step) { while(true) { yield return seed; seed = step(seed); } }内添加table作为其包装。然后将这些div代码分配给包装器：

CSS

Answer 10

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

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

Answer 11

只有在桌子周围没有边框时，给定的答案才有效，这是非常有限的！

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

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

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

有些older browsers may require vendor prefixes可以与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

对于有边界且可滚动的表，使用此（替换变量，$起始文本）

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

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

我刚刚写了一套疯狂的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 14

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

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

Answer 15

这是一种方法：

div {
  ...
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
}

<div>
  <table></table>
</div>

或

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }

Answer 16

带有圆角和带边框单元格的表。使用 @Ramon Tayag 解决方案。

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

使用 SCSS 的解决方案。

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

Answer 17

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

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

Answer 18

我是HTML和CSS的新手，我也在寻找解决方案，就像我找到的那样。

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 19

我开始尝试使用“显示”，我发现border-radius，border，margin，padding在table中显示为：

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 20

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

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 21

最简单的方法...

table {
 border-collapse: inherit;
 border: 1px solid black;
 border-radius: 5px;
}

Answer 22

我总是这样使用Sass

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 23

到目前为止，最好的解决方案来自您自己的解决方案，它像这样：

table, tr, td, th{
  border: 1px solid; 
  text-align: center;
}

table{
	border-spacing: 0;
  width: 100%;
  display: table;
}

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

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


table tr:first-child th:first-child, tr:first-child, table {
    border-top-left-radius: 25px;
}

table tr:first-child th:last-child, tr:first-child, table {
    border-top-right-radius: 25px;
}

<table>
  <tr>
    <th>Num</th><th>Lett</th><th>Lat</th>
  </tr>
  <tr>
    <td>1</td><td>A</td><td>I</td>
  </tr>
  <tr>
    <td>2</td><td>B</td><td>II</td>
  </tr>
  <tr>
    <td>3</td><td>C</td><td>III</td>
  </tr>
</table>

Answer 24

table {
  width: 200px;
  text-align: center;
  border-radius: 12px;
  overflow: hidden;
}

table td {
  border-width: 1px 0 0 1px;
}

table tr:first-child td {
  border-top: none;
}

table tr td:first-child {
  border-left: none;
}

div {
  background-color: lime;
}

<table cellspacing="0" cellpadding="0" border="1">
  <tr>
    <td><div>1</div></td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
  <tr>
    <td>1</td>
    <td>1</td>
    <td>1</td>
    <td>1</td>
  </tr>
</table>

Answer 25

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

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

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

25 个答案: