如何设置table的border-radius?

遇到一个诡异的问题, 为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;
}

参考

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?

转载于:https://www.cnblogs.com/7z7chn/p/5727334.html