HTML 圆角表格 CSS only

在本文中，我们将介绍使用纯 CSS 实现 HTML 圆角表格的方法。通常情况下，HTML 表格的边框是直角的，但是有时候我们希望给表格边框添加圆角效果以增加美观性。CSS 提供了一些属性和技巧来实现这个效果。

阅读更多：HTML 教程

使用 border-radius 属性实现圆角边框

要实现圆角边框，我们可以使用 CSS 的 border-radius 属性。这个属性用来设置元素的边框圆角的半径。

下面是一个实现圆角边框的示例代码：

<table class="rounded-table">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>28</td>
  </tr>
</table>

.rounded-table {
  border-collapse: collapse;
}

.rounded-table th,
.rounded-table td {
  padding: 10px;
  border: 1px solid;
  border-radius: 10px;
}

上面的代码中，我们给表格的 th 和 td 元素添加了 border-radius 属性，并设置为 10px。这样就实现了圆角边框的效果。注意要给表格添加 border-collapse: collapse; 属性来让边框合并成一条。

不同圆角半径的表格

CSS 的 border-radius 属性还可以设置四个不同的半径，分别应用于元素的四个角。这样我们可以实现不同角的圆角效果。

下面是一个实现不同圆角半径的表格的示例代码：

<table class="rounded-table">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>28</td>
  </tr>
</table>

.rounded-table {
  border-collapse: collapse;
}

.rounded-table th,
.rounded-table td {
  padding: 10px;
  border: 1px solid;
  border-radius: 10px 0 0 10px;
}

上面的代码中，我们给表格的 th 和 td 元素的 border-radius 属性设置四个不同的半径，实现了左上角和左下角为圆角的效果。

使用伪元素实现不规则圆角边框

除了使用 border-radius 属性，我们还可以使用伪元素来实现不规则的圆角边框效果。这种方法比较灵活，可以实现更多样化的圆角效果。

下面是一个实现不规则圆角边框的表格的示例代码：

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

.rounded-table.irregular {
  position: relative;
}

.rounded-table.irregular::before,
.rounded-table.irregular::after {
  content: '';
  position: absolute;
  height: 10px;
  background-color: #000;
}

.rounded-table.irregular::before {
  top: -10px;
  left: 0;
  right: 0;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.rounded-table.irregular::after {
  bottom: -10px;
  left: 0;
  right: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

上面的代码中，我们使用 ::before 和 ::after 伪元素来实现上边框和下边框的圆角效果。通过设置不同的半径和位置，可以实现不规则的圆角边框。

总结

本文介绍了使用纯 CSS 实现 HTML 圆角表格的方法。我们可以通过设置 border-radius 属性来给表格的边框添加圆角效果。CSS 的 border-radius 属性还支持设置四个不同的半径，实现不同角的圆角效果。另外，我们还可以使用伪元素来实现不规则的圆角边框。通过掌握这些技巧，我们可以轻松地创建出美观的圆角表格。