HTML表格圆角边框的CSS技巧
直接为HTML表格元素(<table>)设置<code>border-radius属性是无效的，因为表格本身并不直接支持圆角样式。要实现表格的圆角效果，需要一些CSS技巧。
方法一：作用于单元格(<td>和<code><th>)
<p>我们可以将<code>border-radius应用于表格单元格(<td>和<code><th>)，并通过<code>display: table-cell属性模拟表格单元格的布局：
立即学习“前端免费学习笔记（深入）”；
<code class="css">td, th {
border-radius: 10px; /* 调整圆角大小 */
display: table-cell;
}</code>
这种方法简便易行，但可能会导致单元格间出现细微的视觉差异。
方法二：使用伪类选择器
更精确的方法是使用tr:first-child和tr:last-child伪类选择器，分别为表格的第一行和最后一行设置圆角：
<code class="css">tr:first-child {
border-radius: 10px 10px 0 0; /* 上部圆角 */
}
tr:last-child {
border-radius: 0 0 10px 10px; /* 下部圆角 */
}</code>
这种方法只为表格的顶部和底部添加圆角，避免了单元格间可能出现的视觉问题，更干净利落。 你可以根据需要调整10px的值来控制圆角的弧度。
选择哪种方法取决于你的具体需求和对视觉效果的偏好。 方法二通常被认为是更优雅和可靠的解决方案。
