边界-半径属性和边界-崩溃:崩溃不能混合。我如何使用border-radius创建一个圆角折叠表?

我试图使用CSS border-radius属性制作一个圆角表。我使用的表格样式是这样的:

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

问题来了。我还想设置border-collapse:collapse属性，当设置border-radius时，它不再起作用。是否有一种基于css的方式，我可以得到相同的效果边界崩溃:崩溃而不实际使用它?

似乎很大一部分问题是，将表格设置为圆角并不影响角td元素的角。如果表格都是一种颜色，这就不是问题，因为我可以让顶部和底部td角分别为第一行和最后一行圆角。但是，我使用了不同的背景色来区分标题和条纹，所以内部td元素也会显示它们的圆角。

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

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

在将cellspacing设置为零后，底部td角仍然是正方形。

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

我希望不使用JavaScript。

当前回答

其他一些答案很好，但没有一个认为你使用了thead, tbody和tfoot。或者是两种情况的组合。当你应用它们时，你会得到一些不必要的四舍五入或边框。因此，我尝试从@NullUserException调整css-only answer，这是我得到的:

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

深绿色用来清楚地显示整个表格的边界是正确的。从本质上讲，无论你在哪里看到深绿色-是你样式表的边界。这个代码基显示普通表和有头，体和脚的表。CSS与上面的相同，只是为th添加了样式重置。在写作的时候，你可以看到，它们都呈现相同的效果。

2021-08-30 12:04:06

其他回答

我也有同样的问题。完全删除border-collapse并使用: 单元格间距= " 0 "单元格边距= " 0 " 在HTML文档中。例子:

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

2010-11-26 23:37:41

对于一个有边框和可滚动的表，使用这个(replace variables， $ starting texts)

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

2013-06-08 15:26:01

我是新的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-08 21:59:09

下面是一个使用SCSS的解决方案。它创建了一个圆角和有边框的单元格的表格。

这个解决方案使用了@Ramon Tayag的方法。他指出，关键在于使用border-spacing: 0。

$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-23 10:32:28

给出的答案只有在没有国界的情况下才有效，这是非常有限的!

我在SASS中有一个宏来做这件事，它完全支持外部和内部边界，实现了与border-collapse相同的样式:在没有实际指定的情况下崩溃。

在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-15 10:44:33

边界-半径属性和边界-崩溃:崩溃不能混合。我如何使用border-radius创建一个圆角折叠表?

推荐文章

最新文章

标签