遇到一个诡异的问题, 为table
添加border-radius
不起作用. 示例如下:
1 | 2 |
3 | 4 |
#table1 {
border-collapse: collapse;
border-radius: 1em;
border: solid .3em #dfdfdf;
}
#table1
设置了border-collapse: collapse
以消除单元格之间的空白, 但也正这个设置导致了border-radius
的失效.
解决方法很简单, 使用border-collapse: separate
同时配合border-spacing: 0
即可. 这样既确保单元格之间没有空白, 同时table
也有了border-radius
.
1 | 2 |
3 | 4 |
#table2 {
border-collapse: separate;
border-spacing: 0;
border-radius: 1em;
border: solid .3em #dfdfdf;
}