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?CSS3 的border-radius 属性和border-collapse:collapse 不能混用。如何使用border-radius创建一个圆角折叠表？
【发布时间】：2010-10-12 07:32:23
【问题描述】：

编辑 - 原标题： 有没有其他方法可以在CSS 中实现border-collapse:collapse（以便获得折叠的圆角表）？

事实证明，简单地让表格的边框折叠并不能解决根本问题，我更新了标题以更好地反映讨论。

我正在尝试使用 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 不会折叠表格。

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

改用 JavaScript - 可以避免问题。

可能的解决方案：

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

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

这是一个非常轻量级的网站，我希望将 JavaScript 保持在最低限度
对我来说，使用边界半径的部分吸引力在于优雅的降级和渐进式增强。通过对所有圆角使用边框半径，我希望在支持 CSS3 的浏览器中拥有始终如一的圆角网站和在其他浏览器中始终如一的方形网站（我在看着你，IE）。

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

【问题讨论】：

你不能把表格包裹在一个div中，在div上设置border-radius和“溢出：隐藏”吗？我刚刚测试过，效果很好，除非您需要在具有固定宽度/高度的 div 或其父级中滚动/展开。
我认为最后的 CSS 语句缺少分号。
这个问题是在 2009 年提出的。我有点惊讶的是，在 2015 年没有比下面列出的更好的解决方案。 W3C 应该在几年前就解决了这个问题。
我认为提供的示例链接不再合适...

标签： html css rounded-corners html-table

【解决方案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 破坏一切的问题。

解决方法是add border-spacing: 0 并保留默认的border-collapse: separate。

【讨论】：

为什么不添加border-spacing: 0;作为边框样式，而不是乱搞HTML？
我在设置 TR 标签而不是 TD 标签的背景颜色时遇到问题。确保如果您要对表格进行条带化，您设置的是 TD 而不是 TR 的背景颜色。
如果您必须在TR上使用背景色会发生什么？有可能吗？
只需像 Ramon 一样添加 border-spacing: 0; 建议为我修复它。确保将border-radius 和border-spacing 样式添加到<th> 或<td> 元素，而不是<thead> 或<tbody>。
我正在使用引导程序，并且通过使用 Ramon 的建议找到了解决方案，如下所示：border-spacing: 0; border-collapse: separate;

【解决方案2】：

以下方法通过使用带有1px 传播的box-shadow 而不是“真实”边框来工作（在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;
    }

<table>
  <thead>
    <tr>
      <th>Foo</th>
      <th>Bar</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Baz</td>
      <td>Qux</td>
    </tr>
    <tr>
      <td>Life is short</td>
      <td rowspan="3">and</td>
    </tr>
    <tr>
      <td>Love</td>
    </tr>
    <tr>
      <td>is always over</td>
    </tr>
    <tr>
      <td>In the</td>
      <td>Morning</td>
    </tr>
  </tbody>
</table>

【讨论】：

这是唯一对我有用的东西。但是很难在表格边框上获得正确的颜色。
它不可用如果您的桌子与周围区域的背景颜色不同。
@g.pickardou 可以通过在表格元素上添加“溢出：隐藏”来解决问题。
box-shadow 使桌子变大，所以现在边被切掉了。

【解决方案3】：

如果您想要一个允许 1px 边框的纯 CSS 解决方案（无需在 HTML 中设置 cellspacing=0）（您无法使用 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>

【讨论】：

请写出包含（永久）代码的答案。如果答案有很多代码，只需发布相关位并解释它们为何相关。
这是一个很好的解决方案，但有点难以阅读。我重写了一些样式规则并添加了代码解释，希望对您有所帮助。
对表格也应用半径，否则当您将背景应用到表格本身时它看起来很奇怪。
table.Info 类与什么有什么关系？

【解决方案4】：

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

【讨论】：

谢谢，这让我可以做我需要做的事情（这涉及到包含以下所有 TD 的“圆角”框顶部外部的一系列 TH 元素）
border-spacing: 0 的问题是你不能有 1px 的边框，对吧？因为边框堆叠而不是折叠。
border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; 得到了我所需要的。

【解决方案5】：

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

working draft 指定当border-collapse 的值为collapse 时，border-radius 不适用于表格元素。

【讨论】：

我也考虑过这个问题，但是如果我创建一个 div 来围绕桌子并将其设置为圆角，方形桌角仍然会渗出。请参阅新发布的示例。
我能找到的最佳折衷方案是在表格中添加一个 THEAD 块并为其应用灰色背景（在表格本身上使用 #eee）。标题单元格在 TABLE 的边界后面而不是在它前面溢出。然后我将表格边框增加到 3px 以隐藏溢出。
@vamin“渗透”——如果你使用overflow:hidden;则不是
所以在这种情况下，每个人都可以从这些页面底部使用我的解决方案b2n.ir/table-radius

【解决方案6】：

正如 Ian 所说，解决方案是将表格嵌套在 div 中并像这样设置：

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

使用overflow:hidden，方角不会穿过 div。

【讨论】：

请记住，无论谁想使用它，overflow: hidden 的任何弹出框/工具提示都会被包装器尺寸剪裁。

【解决方案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：

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

【讨论】：

我添加了一个 cellspacing=0 的例子，而且更接近了。不受欢迎的边框消失了，但底角仍然渗出。
再次感谢您的帮助。这些表格是在 php 中生成的，所以我在想如果没有提出一个优雅的解决方案，我只需为每个角 th/td 分配一个类并分别设置它们的样式。

【解决方案8】：

我尝试了在thead th:first-child 和thead th:last-child 上使用伪元素:before 和:after 的解决方法

结合使用<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) 中适用于我，让我知道这在其他浏览器中是否适用于您。

【讨论】：

【解决方案9】：

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

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

table {
  border-collapse: collapse;
}

【讨论】：

【解决方案10】：

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

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

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

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

一些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 样式。

希望这会有所帮助。

【讨论】：

您不再需要为边界半径添加前缀，期待 FF 3.6 (-moz)。此外，当然不再需要 -khtml 了。
@JonatanLittke，如果您认为可以改进，您可以随时编辑答案。我删除了所有前缀并添加了指向 caniuse.com 的链接，这样人们就可以自己决定 border-radius 的前缀。

【解决方案11】：

这是一种方法：

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案13】：

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

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

【讨论】：

这行得通，但它需要你事后使用 firstchild/lastchild 技巧来获得效果。

【解决方案14】：

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

【讨论】：

【解决方案15】：

border-collapse 的解决方案：table 和 display 分开：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(../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;        
}

【讨论】：

没有理由制作这个答案社区维基。这样做会使您不会从您的回答中获得任何声誉。

【解决方案16】：

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

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

【讨论】：

【解决方案17】：

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

不需要包装元素。诚然，我不知道这在 7 年前最初提出问题时是否可行，但现在可行。

【讨论】：

这是一个聪明的解决方案，但它也“删除”了实际的边框。在 Chrome 上，表格的右边框和下边框消失，所有圆角都没有边框。

【解决方案18】：

我开始尝试“显示”，我发现：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;
}

【讨论】：

【解决方案19】：

这是一个最近的示例，说明如何实现来自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;
}

【讨论】：

【解决方案20】：

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

【讨论】：

【解决方案21】：

最简单的方法...

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

【讨论】：

请不要只发布代码作为答案，还要解释您的代码的作用以及它如何解决问题的问题。带有解释的答案通常更有帮助，质量更高，更有可能吸引投票。

【解决方案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;
    }
  }
}

【讨论】：

我猜你可能还没明白，他试图在启用border-collapse: collapse 的情况下做到这一点。
@giovannipds 看看他自己的回复（接受的答案）。我的方式只是另一种方式。现在删除“-1”。
哦，对不起，你绝对是对的，我的错，他接受的答案似乎说的完全一样。我要坚持问题标题中写的内容，他强调他想要边界崩溃，所以我直接去了。如果可以，我会删除 -1，但我不能，您需要在答案中编辑一些内容以允许我这样做。尝试提及border-collapse: collapse 无法做到这一点。再次原谅，我会等待你的更新。

【解决方案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>

【讨论】：

最终得到一个边框为 2px 厚的表格

【解决方案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>

【讨论】：

【解决方案25】：

其他一些答案很好，但没有人认为您使用thead、tbody 和tfoot。或者情况，当你可以将它们组合起来时。当你应用它们时，你会得到一些不必要的舍入或边框。因此，我尝试从 @NullUserException 调整仅 css 的答案，这就是我得到的：

table {
    border-radius: 5px;
    border-width: 2px;
    border-style: solid;
    border-color: darkgreen;
    border-spacing: 0;
    border-collapse: separate;
    width: 100%;
}
table tr td,
table tr th {
    border-right-width: 2px;
    border-right-style: solid;
    border-right-color: darkgreen;
    border-bottom-width: 2px;
    border-bottom-style: solid;
    border-bottom-color: darkgreen;
}
table tr th:last-child,
table tr td:last-child {
    border-right-width: 2px;
    border-right-style: none;
    border-right-color: darkgreen;
}
table tr:last-child td,
table tr:last-child th {
    border-bottom-width: 2px;
    border-bottom-style: none;
    border-bottom-color: darkgreen;
}
/* top-left border-radius */
table :not(tfoot) tr:first-child th:first-child,
table :not(tfoot) tr:first-child td:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 0;
}

/* top-right border-radius */
table :not(tfoot) tr:first-child th:last-child,
table :not(tfoot) tr:first-child td:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 0;
}

/* bottom-left border-radius */
table :not(thead) tr:last-child th:first-child,
table :not(thead) tr:last-child td:first-child {
    border-bottom-left-radius: 5px;
}

/* bottom-right border-radius */
table :not(thead) tr:last-child th:last-child,
table :not(thead) tr:last-child td:last-child{
    border-bottom-right-radius: 5px;
}

/*Handle thead and tfoot borders*/
table thead tr:first-child th,
table thead tr:first-child td {
  border-top-style: none;
}
table thead tr:last-child th,
table thead tr:last-child td {
  border-bottom-style: solid;
  border-bottom-width: 2px;
  border-bottom-color: darkgreen;
}
table tfoot tr:last-child th,
table tfoot tr:last-child td {
  border-bottom-style: none;
}
table tfoot tr:first-child th,
table tfoot tr:first-child td {
  border-top-style: solid;
  border-top-width: 2px;
  border-top-color: darkgreen;
}
table tr:first-child th,
table tr:first-child td {
  border-top-style: none;
}

darkgreen 用于清楚地表明整个表格的任何地方的边框都是正确的。本质上，无论您在哪里看到 darkgreen - 都是您设置表格边框样式的地方。
此codepen 显示常规表和带有thead、tbody 和tfoot 的表。 CSS 与上面的相同，只是为th 添加了样式重置。在撰写本文时，您可以看到它们都呈现相同的效果。

【讨论】：

【解决方案26】：

将“溢出：隐藏”与“边界半径”一起使用这也适用于“折叠”表

例子：

边框半径：1em；溢出：隐藏；

【讨论】：

【解决方案27】：

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

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

【讨论】：