我试图使用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。


当前回答

边界折叠解决方案:表和显示分开:体和标题内联表。

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

其他回答

在遇到同样的问题后找到了这个答案,但发现它非常简单:只需给表overflow:hidden

不需要包装元素。当然,我不知道7年前这个问题最初被问到的时候,这是否有用,但现在有用了。

简单的方法…

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

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

到目前为止,最好的解决方案来自你自己的解决方案,它是这样的:

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>

我开始实验“显示”,我发现:边界半径,边界,边距,填充,在一个表中显示:

display: inline-table;

例如

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

但是我们需要为每一列设置一个宽度

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