如何使用CSS设置表格的圆角边框？

翻滚的胖子
2023-08-01 10:41:28
前端技术
CSS

在CSS中，我们可以使用border-radius属性来设置元素的圆角边框。

对于表格，我们可以通过如下步骤来设置圆角边框：

步骤一：首先，给表格添加一个类名或ID，以便在CSS中进行样式设置。

<table class="rounded-table">
  ...
</table>

步骤二：在CSS中，使用border-radius属性来设置圆角边框的大小。

.rounded-table {
  border-collapse: collapse;
  border-radius: 10px;
}

在上述代码中，border-collapse属性用于合并相邻的边框，border-radius属性用于设置圆角边框的大小。你可以根据需要调整border-radius的值，以达到不同的效果。

通过以上两个步骤，我们就可以实现表格的圆角边框效果了。

下面是一个具体的代码案例：

<style>
  .rounded-table {
    border-collapse: collapse;
    border-radius: 10px;
  }
  .rounded-table th, .rounded-table td {
    border: 1px solid #ccc;
    padding: 8px;
  }
</style>
 
<table class="rounded-table">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>22</td>
  </tr>
</table>