table表格设置border-radius不生效

table表格设置border-radius不生效

背景：视觉还原时一个小点，发现设置border-radius后不生效，百度发现是border-collapse: collapse和border-radius时不兼容。

解决办法：给th、td设置border以达到最后要的效果。

css:
        table {
            width: 500px;
            height: 200px;
            border: 1px solid #ccc;
            border-radius: 10px;
            border-spacing: 0;
             // 因为表格默认的border-collapse: separate; 是边框分离模式。
             // border-spacing 属性设置相邻单元格的边框间的距离（仅用于“边框分离”模式）
         }
        td {
            text-align: center;
            border-right: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
        }
        td:last-child {
            border-right: 0;
        }
        tr:last-child td{
            border-bottom: 0;
        }
  html:
  		 <table>
	        <tr>
	            <td>123</td>
	            <td>123</td>
	            <td>123</td>
	            <td>123</td>
	        </tr>
	        <tr>
	            <td>123</td>
	            <td>123</td>
	            <td>123</td>
	            <td>123</td>
	        </tr>
	        <tr>
	            <td>123</td>
	            <td>123</td>
	            <td>123</td>
	            <td>123</td>
	        </tr>
    </table>

效果图：