361

编辑 - 原标题：有没有其他方法可以实现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. 使用边界半径对我的部分吸引力是优雅的退化和渐进的增强。通过对所有圆角使用边框半径，我希望在支持 CSS3 的浏览器中拥有一个始终如一的圆形站点，在其他浏览器中拥有一个始终如一的方形站点（我在看着你，IE）。

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

4

27 回答 27

278

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

圆角表的问题是 td 元素也没有变成圆角。您可以通过执行以下操作来解决此问题：

    table tr:last-child td:first-child {
        border: 2px solid orange;
        border-bottom-left-radius: 10px;
    }
    
    table tr:last-child td:last-child {
        border: 2px solid green;
        border-bottom-right-radius: 10px;
    }
<table>
  <tbody>
    <tr>
      <td>
        1
      </td>
      <td>
        2
      </td>
    </tr>
    <tr>
      <td>
        3
      </td>
      <td>
        4
      </td>
    </tr>
  </tbody>
</table>

现在一切正常，除了仍然存在border-collapse: collapse破坏一切的问题。

一种解决方法是在表中添加border-spacing: 0并保留默认值border-collapse: separate。

于 2009-03-11T18:53:29.970 回答
117

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

于 2010-04-06T17:09:18.567 回答
73

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

  • 为表格单元格（和）设置一个border-right和border-bottomtdth
  • 给第一行的单元格一个border-top
  • 给第一列中的单元格一个border-left
  • 使用first-child和last-child选择器，为四个角中的表格单元格圆角。

在此处查看演示。

给定以下 HTML：

请参见下面的示例： 

   
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 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;
  border-top: solid 1px #bbb;
}

/* top-left border-radius */
table tr:first-child th:first-child {
  border-top-left-radius: 6px;
}

/* top-right border-radius */
table tr:first-child th: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>
    <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>

于 2011-01-24T18:56:28.733 回答
32

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

于 2010-10-18T04:16:58.123 回答
25

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

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

于 2009-03-09T22:56:40.620 回答
20

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

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

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

于 2013-01-06T21:27:15.277 回答
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：

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

于 2009-03-09T22:54:11.187 回答
7

实际上你可以添加你的tableinside adiv作为它的包装器。然后将这些CSS代码分配给包装器：

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

table {
  border-collapse: collapse;
}
于 2017-10-24T11:45:08.853 回答
6

我尝试了一种使用伪元素的解决方法，:before并且:afterthead th:first-childthead 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) 中适用于我，让我知道这是否适用于其他浏览器。

于 2011-08-25T01:43:02.107 回答
6

这是一种方法：

div {
  border: 2px solid red;
  overflow: hidden;
  border-radius: 14px;
  transform: rotate(0deg);
}
table {
  border-spacing: 0;
  background-color: blue;
  height: 100%;
  width: 100%;
}
<div>
  <table>
    <tr>
      <td><br></td> 
    </tr>
  </table>
</div>

或者

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }
于 2020-02-14T10:17:52.493 回答
5

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

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

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

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

一些较旧的浏览器可能需要供应商前缀才能使用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 样式。

希望这可以帮助。

于 2011-07-15T10:44:33.070 回答
5

我刚刚为此编写了一组疯狂的 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;
    }
<table>
  <thead>
    <tr>
      <th>
        Table Head
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        Table Data
      </td>
    </tr>
  </tbody>
</table>

/* end complicated rounded table corners !*/
于 2014-03-14T21:43:47.670 回答
4

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

<table class="top_container" align="center" cellspacing="0" cellpadding="0">
于 2010-11-26T23:37:41.983 回答
4

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

如果您使用thead, tfootor ，th只需用它们替换tr:first-childand 。tr-last-childtd

#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>
于 2013-06-08T15:26:01.327 回答
3

带有边框折叠的解决方案：表格和显示分开：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;        
}
于 2012-11-28T18:32:53.550 回答
3

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

我试试看，猜猜它的工作原理:)

于 2015-02-08T21:59:09.267 回答
3

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

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

于 2016-09-27T17:23:10.530 回答
2

这是一个最近的例子，说明如何从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;
}
于 2011-09-22T02:07:50.833 回答
2

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

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;
}
于 2012-05-30T22:00:54.107 回答
2

带有圆角和带边框的单元格的表格。使用@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;
  }
}
于 2018-08-23T10:32:28.013 回答
2

最简单的方法...

table {
 border-collapse: inherit;
 border: 1px solid black;
 border-radius: 5px;
}
于 2020-07-30T06:20:10.907 回答
0

我总是使用 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;
    }
  }
}
于 2017-08-11T13:34:29.877 回答
0

迄今为止最好的解决方案来自您自己的解决方案，它是这样的：

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>

于 2019-10-15T01:40:45.790 回答
0 

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>

于 2021-06-06T12:47:38.840 回答
0

其他一些答案很好，但没有一个认为您使用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- 就是您设置表格边框的位置。
此代码笔显示常规表格和带有thead,tbody和的表格tfoot。CSS 与上面的相同，只是为th. 在撰写本文时，您可以看到它们的渲染相同。

于 2021-08-30T12:04:06.520 回答
0

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

例子：

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

于 2022-02-12T05:16:00.177 回答
-1

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

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

于 2011-11-17T00:38:21.753 回答