CSS 表格边框半径

Question

我有以下代码，如果边框折叠，我如何使表格边框变成半径？

<table>
    <thead>
        <tr>
            <th colspan="2">Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>b1</td>
            <td>b2</td>
        </tr>
        <tr>
            <td>b3</td>
            <td>b4</td>
        </tr>
    </tbody>
</table>

Answer 1

你的问题是一个小技巧，但一般来说 border-radius 只是一个边框属性，可以应用于任何接受边框的元素。请参见下面的示例:

table{
  border: 1px solid red;
  border-radius: 20px;
}

td{
  border: 1px solid green;
  border-radius: 20px;
}

<table>
    <thead>
        <tr>
            <th colspan="2">Head</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>b1</td>
            <td>b2</td>
        </tr>
        <tr>
            <td>b3</td>
            <td>b4</td>
        </tr>
    </tbody>
</table>