如何设置table的border-radius?

遇到一个诡异的问题, 为table添加border-radius不起作用. 示例如下:

#table1 {
border-collapse: collapse !important;
border-radius: 1em !important;
border: solid .3em #dfdfdf !important;
}
#table1 td,
#table1 th {
border: 0 !important;
}
.centered {
margin-left: auto;
margin-right: auto;
}

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.

#table2 {
border-collapse: separate !important;
border-spacing: 0 !important;
border-radius: 1em !important;
border: solid .3em #dfdfdf !important;
}
#table2 td,
#table2 th {
border: 0 !important;
}

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?