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

本文翻译自：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?

Edit - Original Title: Is there an alternative way to achieve border-collapse:collapse in CSS (in order to have a collapsed, rounded corner table)? 编辑-原始标题：是否有另一种方法可以实现border-collapse:collapse CSS中的border-collapse:collapse （以便具有折叠的圆角表）？

Since it turns out that simply getting the table's borders to collapse does not solve the root problem, I have updated the title to better reflect the discussion. 事实证明，仅使表格的边框折叠起来并不能解决根本问题，因此，我更新了标题以更好地反映讨论内容。

I am trying to make a table with rounded corners using the CSS3 border-radius property. 我正在尝试使用CSS3 border-radius属性制作一个带有圆角的表 。 The table styles I'm using look something like this: 我正在使用的表格样式如下所示：

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

Here's the problem. 这是问题所在。 I also want to set the border-collapse:collapse property, and when that is set border-radius no longer works. 我也想设置border-collapse:collapse属性，当设置该属性时， border-radius不再起作用。 Is there a CSS-based way I can get the same effect as border-collapse:collapse without actually using it? 有没有一种基于CSS的方法可以在不实际使用的情况下获得与border-collapse:collapse相同的效果？

Edits: 编辑：

I've made a simple page to demonstrate the problem here (Firefox/Safari only). 我在此处做了一个简单的页面来演示问题（仅Firefox / Safari）。

It seems that a large part of the problem is that setting the table to have rounded corners does not affect the corners of the corner td elements. 看来问题的很大一部分是将表设置为具有圆角不会影响corner td元素的角。 If the table was all one color, this wouldn't be a problem since I could just make the top and bottom td corners rounded for the first and last row respectively. 如果表格全是一种颜色，这将不是问题，因为我可以分别使第一行和最后一行的顶部和底部td角变圆。 However, I am using different background colors for the table to differentiate the headings and for striping, so the inner td elements would show their rounded corners as well. 但是，我在表中使用了不同的背景色来区分标题和条纹，因此内部td元素也将显示其圆角。

Summary of proposed solutions: 拟议解决方案摘要：

Surrounding the table with another element with round corners doesn't work because the table's square corners "bleed through." 用另一个带有圆角的元素包围桌子是行不通的，因为桌子的四角会“渗出”。

Specifying border width to 0 doesn't collapse the table. 将边框宽度指定为0不会折叠表格。

Bottom td corners still square after setting cellspacing to zero. 将cellpacing设置为零后，底部td角仍为正方形。

Using JavaScript instead- works by avoiding the problem. 使用JavaScript可以避免此问题。

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. 这些表是用PHP生成的，因此我可以将一个不同的类应用于每个外部th / tds并分别设置每个角的样式。 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. 可能的解决方案2是使用JavaScript（特别是jQuery）对角进行样式设置。 This solution also works, but still not quite what I'm looking for (I know I'm picky). 该解决方案也可以使用，但是仍然不是我想要的（我知道我很挑剔）。 I have two reservations: 我有两个保留意见：

1. this is a very lightweight site, and I'd like to keep JavaScript to the barest minimum 这是一个非常轻量级的网站，我希望将JavaScript保持在最低水平
2. 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). 通过对所有圆角使用border-radius，我希望在支持CSS3的浏览器中拥有一个一致的圆形站点，并在其他浏览器中拥有一个一致的正方形站点（我在看着您，IE）。

I know that trying to do this with CSS3 today may seem needless, but I have my reasons. 我知道今天尝试使用CSS3似乎没有必要，但是我有我的理由。 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. 我还要指出的是，此问题是w3c规范的结果，而不是对CSS3的支持不佳，因此，当CSS3得到更广泛的支持时，任何解决方案都仍然是相关且有用的。

---

#1楼

参考：https://stackoom.com/question/2dRt/CSS-的border-radius属性和border-collapse-collapse不能混合使用-如何使用边框半径创建带有圆角的折叠表格

---

#2楼

I started experiment with "display" and I found that: border-radius , border , margin , padding , in a table are displayed with: 我开始使用“ display”进行实验，发现在table中的border-radius ， border ， margin ， padding显示为：

display: inline-table;

For example 例如

table tbody tr {
  display: inline-table;
  width: 960px; 
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

But we need set a width of every column 但是我们需要设置每列的width

tr td.first-column {
  width: 100px;
}
tr td.second-column {
  width: 860px;
}

---

#3楼

Solution with border-collapse:separate for table and display:inline-table for tbody and thead. 边框折叠的解决方案：为表格分隔并显示：为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;        
}

---

#4楼

As Ian said, the solution is to nest the table inside a div and set it like that: 正如Ian所说，解决方案是将表嵌套在div内并进行如下设置：

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

With overflow:hidden , the square corners won't bleed through the div. 使用overflow:hidden ，方形角不会在div中流血。

---

#5楼

For a bordered and scrollable table, use this (replace variables, $ starting texts) 对于有边框和可滚动的表，请使用此表（替换变量， $起始文本）

If you use thead , tfoot or th , just replace tr:first-child and tr-last-child and td with them. 如果使用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: HTML：

  

    

       
1
       
2
    
    

       
3
       
4
    
  

---

#6楼

I just wrote a crazy set of CSS for this that seems to work perfectly: 我刚刚为此编写了一套疯狂的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 !*/