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

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

在本教程中，我们将学习如何使用CSS设置表格边框圆角。通过使用一些简单的CSS属性，我们可以轻松地为表格添加圆角边框，使其更加美观。

步骤一：HTML表格结构

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>小明</td>
    <td>18</td>
  </tr>
  <tr>
    <td>小红</td>
    <td>20</td>
  </tr>
</table>

首先，我们需要准备一个简单的HTML表格结构，包含表头和数据行。你可以根据自己的需求进行调整，添加更多的行和列。

步骤二：CSS样式

table {
  border-collapse: collapse;
}

table th, table td {
  padding: 10px;
  border: 1px solid #ccc;
}

table th {
  background-color: #f0f0f0;
}

table td {
  background-color: #fff;
}

接下来，我们需要为表格添加一些CSS样式。首先，我们使用border-collapse: collapse;属性来合并表格边框，使其看起来更整齐。然后，我们使用padding属性为表头和数据单元格设置内边距，以增加内容的可读性。最后，我们使用background-color属性为表头和数据单元格设置背景颜色，使其更加美观。

步骤三：设置边框圆角

table th:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

table th:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

table td:first-child {
  border-top-left-radius: 10px;
}

table td:last-child {
  border-top-right-radius: 10px;
}

最后，我们使用border-*-radius属性为表头和数据单元格的边框设置圆角。通过使用border-*-radius属性的不同值，我们可以设置不同的边框圆角样式。

效果展示

通过以上的CSS样式设置，我们成功地为表格添加了圆角边框。下面是最终的效果展示：

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 如何使用CSS设置表格单元格的宽度和高度？
• 下一篇： 如何使用CSS设置表格边框颜色？