table表格设置border-radius不生效

经过研究发现是 border-collapse: collapse 和 border-radius 时不兼容导致的。

解决办法是：给表格加上边框，然后给 th、td 设置右边框，最后去掉 th、td 最右侧和最下面的边框，这样就模拟出想要的效果。

效果：

代码如下：

<style>
    table {
        width: 500px;
        height: 200px;
        border: 1px solid #ccc;
        border-radius: 10px;
        border-spacing: 0;
    }
    th, td {
        text-align: center;
        border-right: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
    }
    th:last-child, td:last-child {
        border-right: 0;
    }
    /* 兼容有thead的情况 */
    tr:last-child:not(:only-child) th, tr:last-child td{
        border-bottom: 0;
    }
    table > :only-child th{
        border-bottom: 0;
    }
    /* 兼容有thead的情况 */
</style>

<table>
    <tr>
        <th>123</th>
        <th>123</th>
        <th>123</th>
        <th>123</th>
    </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>
复制