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


当前回答

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

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

其他回答

你有没有试过使用表{border-spacing: 0}而不是表{border-collapse: collapse} ??

下面的方法(在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>

对于一个有边框和可滚动的表,使用这个(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>

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>

如果你想要一个css解决方案(不需要在HTML中设置cellspacing=0),允许1px边界(你不能用border-spacing: 0解决方案),我更喜欢做以下事情:

为你的表格单元格(td和th)设置border-right和border-bottom 给第一行中的单元格一个border-top 给第一列中的单元格一个border-left 使用第一个子和最后一个子选择器,在四个角中为表单元格画出适当的角。

点击这里查看演示。

给定以下HTML:

SEE example below: 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>