如何設置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?