CSS3 的 border-radius 属性和 border-collapse:collapse 不能混合。如何使用边框半径创建带有圆角的折叠表格？

StackOverflow https://stackoverflow.com/questions/628301

题

编辑 - 原标题： 有没有其他方法可以实现 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 没有实际使用它？

编辑：

我制作了一个简单的页面来演示该问题 这里 （仅限 Firefox/Safari）。

看来很大一部分问题是把桌子设置成圆角并不会影响墙角的角 td 元素。如果桌子都是一种颜色，这不会是问题，因为我可以只制作顶部和底部 td 第一行和最后一行的角分别为圆角。但是，我对表格使用不同的背景颜色来区分标题和条纹，因此内部 td 元素也会显示它们的圆角。

建议解决方案摘要：

用另一个带圆角的元素包围桌子是行不通的，因为桌子的方角会“渗透”。

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

底部 td 将单元格间距设置为零后，角仍然是方形的。

使用 JavaScript 来代替——可以避免这个问题。

可能的解决方案：

这些表是用 PHP 生成的，因此我可以对每个外部 th/tds 应用不同的类，并分别设置每个角的样式。我不想这样做，因为它不是很优雅，而且应用于多个表有点痛苦，所以请继续提出建议。

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

  1. 这是一个非常轻量级的网站，我希望将 JavaScript 保持在最低限度
  2. 使用 border-radius 对我来说的吸引力之一是优雅的降级和渐进的增强。通过对所有圆角使用 border-radius，我希望在支持 CSS3 的浏览器中拥有一致的圆形网站，并在其他浏览器中拥有一致的方形网站（我正在看着你，IE）。

我知道今天尝试使用 CSS3 来做到这一点似乎没有必要，但我有我的理由。我还想指出，这个问题是 w3c 规范的结果，而不是 CSS3 支持不佳的结果，因此当 CSS3 得到更广泛的支持时，任何解决方案仍然是相关和有用的。

有帮助吗？

解决方案

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

圆角的问题是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 ）。

其他提示

以下方法适用于（在Chrome中进行测试），使用box-shadow，传播1px而不是<！>“真实<！>”;边界。

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

  • 设置一个 border-right 和 border-bottom 对于您的表格单元格（td 和 th)
  • 给定单元格中的 第一排 A border-top
  • 给定单元格中的 第一栏 A border-left
  • 使用 first-child 和 last-child 选择器，将四个角中的表格单元格的相应角圆化。

请参阅此处的演示。

给定以下 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>

您是否尝试过使用table{border-spacing: 0}代替table{border-collapse: collapse} ???

你可能不得不在桌子周围放置另一个元素并用圆角边框设置样式。

工作草案指定border-radius不适用于表格元素border-collapse的值是collapse。

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

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

使用overflow:hidden，方角不会渗透div。

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

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; }），则灰色<！> quot; borders <！> quot;将消失。

编辑2：

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

我尝试使用: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）请告诉我这是否适用于其他浏览器。

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

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

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

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

table {
  border-collapse: collapse;
}

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

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

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

在所有浏览器中为纯CSS提供漂亮的圆形边框，但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样式。

希望这有帮助。

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

如果您使用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>

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

带边框折叠的解决方案：表和显示分开：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;        
}

我是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
}

我试一试，猜猜它的作用：）

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

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

带圆角和带边框的桌子。 使用 @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;
  }
}

我开始尝试使用<！>“display <！>”;我发现：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;
}

以下是中有关如何实现带圆角的表格的最新示例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;
}

我总是这样使用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;
    }
  }
}

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

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

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top