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


当前回答

这里有一个方法:

div { 边框:2px纯红色; 溢出:隐藏; border - radius: 14 px; 变换:旋转(0度); } 表{ border-spacing: 0; 背景颜色:蓝色; 高度:100%; 宽度:100%; } < div > <表> < tr > < td > < br > < / td > < / tr > 表> < / < / div >

Or

    div {
      ...
      overflow: hidden;
      border-radius: 14px;
      position: relative;
      z-index: 1;
    }
        
        

其他回答

下面的方法(在Chrome中测试)通过使用一个扩展为1px的盒子阴影而不是“真实”边界。

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>

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

圆角的问题是,td元素并没有变成圆角。你可以这样解决这个问题:

表tr:最后一个孩子td:第一个孩子{ 边框:2px纯橙色; border-bottom-left-radius: 10 px; } 表tr:最后一个子td:最后一个子{ 边框:2px纯绿色; border-bottom-right-radius: 10 px; } <表> tbody > < < tr > < td > 1道明> < / 2 < td > < / td > < / tr > < tr > < td > 3 < / td > 4 < td > < / td > < / tr > tbody > < / 表> < /

现在所有东西都四舍五入了,除了边界崩溃的问题:崩溃破坏了所有东西。

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

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

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

简单的方法…

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

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

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