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

html CSS

逆天JinJin

2020-03-23

编辑-原标题：是否有其他方式来实现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不实际使用相同的效果？

编辑：

我做了一个简单的页面来演示该问题在这里（只火狐/ Safari浏览器）。

看来问题的很大一部分是将表设置为具有圆角不会影响Corner td元素的角。如果桌子全是一种颜色，那将不是问题，因为我可以td分别使第一行和最后一行的上角和下角变圆。但是，我在表中使用了不同的背景色来区分标题和条纹，因此内部td元素也将显示其圆角。

拟议解决方案摘要：

用另一个带有圆角的元素包围桌子是行不通的，因为桌子的四角“渗漏了”。

Specifying border width to 0 doesn't collapse the table.

Bottom td corners still square after setting cellspacing to zero.

Using JavaScript instead- works by avoiding the problem.

Possible solutions:

The tables are generated in PHP, so I could just apply a different class to each of the outer th/tds and style each corner separately. I'd rather not do this, since it's not very elegant and a bit of a pain to apply to multiple tables, so please keep suggestions coming.

Possible solution 2 is to use JavaScript (jQuery, specifically) to style the corners. This solution also works, but still not quite what I'm looking for (I know I'm picky). I have two reservations:

this is a very lightweight site, and I'd like to keep JavaScript to the barest minimum
part of the appeal that using border-radius has for me is graceful degradation and progressive enhancement. By using border-radius for all rounded corners, I hope to have a consistently rounded site in CSS3-capable browsers and a consistently square site in others (I'm looking at you, IE).

I know that trying to do this with CSS3 today may seem needless, but I have my reasons. I would also like to point out that this problem is a result of the w3c specification, not poor CSS3 support, so any solution will still be relevant and useful when CSS3 has more widespread support.

第2799篇《CSS3的border-radius属性和border-collapse：collapse不能混合使用。如何使用边框半径创建带有圆角的折叠表格？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共21个回答

老丝路易神乐 2020.03.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>

小卤蛋梅蛋蛋 2020.03.23

这是一种方法：

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

Mandy 2020.03.23

边界半径现已得到正式支持。因此，在以上所有示例中，您都可以删除“ -moz-”前缀。

另一个技巧是对顶部和底部行使用与边框相同的颜色。所有三种颜色都相同，即使不是物理颜色，它也可以融合并看起来像是完美的圆桌。

番长小哥 2020.03.23

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

泡芙 2020.03.23

我开始实验“展示”，我发现：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;
}

Harry理查德 2020.03.23

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

不需要包装元素。当然，我不知道这在7年前最初提出该问题时是否会奏效，但现在已经奏效。

神乐蛋蛋 2020.03.23

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

小小 2020.03.23

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

我尝试一下，猜猜它起作用了:)

泡芙前端 2020.03.23

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

樱小胖Mandy 2020.03.23

边框折叠的解决方案：为表格分隔并显示：为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;        
}

番长樱梅 2020.03.23

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

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

JinJin 2020.03.23

我尝试了一种使用伪元素的解决方法，: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）让我知道在其他浏览器中是否对您有效。

村村 2020.03.23

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

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

table {
  border-collapse: collapse;
}

伽罗 2020.03.23

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

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

伽罗飞云 2020.03.23

如果您想要一个纯CSS的解决方案（无需cellspacing=0在HTML中设置），并允许1px边框（您不能使用该border-spacing: 0解决方案），则我喜欢执行以下操作：

设置一个border-right和border-bottom你的表格单元格（td和th）
给第一行中的单元格一个border-top
给第一列中的单元格一个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>

西门达蒙Davaid 2020.03.23

以下方法可以通过使用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;
}

Mandy村村 2020.03.23

您可能必须在表格周围放置另一个元素，并用圆角边框设置样式。

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

阿飞 2020.03.23

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

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：

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

Tom凯 2020.03.23

正如Ian所说的，解决方案是将表嵌套在div内并进行如下设置：

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

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

卡卡西Near 2020.03.23

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

小卤蛋 2020.03.23

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

圆角化表格的问题是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-spacing: 0默认值并保留默认值border-collapse: separate。

相似问题

基于react18+vite4+zustand网页端仿微信聊天实例

0 回答

基于tauri+vite4+pinia跨端后台管理系统应用

0 回答

HTML5 Drag与Drop 拖动时更改图标/光标

5 回答

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

25 回答

基于tauri+vue3跨端聊天应用|tauri仿微信模板