如何才能在HTML表格中实现圆角边框效果？-css教程-PHP中文网

如何才能在html表格中实现圆角边框效果？

HTML表格圆角边框的CSS技巧

直接为HTML表格元素(

)设置border-radius属性是无效的，因为表格本身并不直接支持圆角样式。要实现表格的圆角效果，需要一些CSS技巧。
方法一：作用于单元格(

和	) 我们可以将`border-radius`应用于表格单元格(	和	)，并通过`display: table-cell`属性模拟表格单元格的布局：立即学习“前端免费学习笔记（深入）”； td, th { border-radius: 10px; /* 调整圆角大小 / display: table-cell; } 这种方法简便易行，但可能会导致单元格间出现细微的视觉差异。方法二：使用伪类选择器 MiniMax开放平台 MiniMax-与用户共创智能，新一代通用大模型下载更精确的方法是使用`tr:first-child`和`tr:last-child`伪类选择器，分别为表格的第一行和最后一行设置圆角： tr:first-child { border-radius: 10px 10px 0 0; / 上部圆角 / } tr:last-child { border-radius: 0 0 10px 10px; / 下部圆角 */ } 这种方法只为表格的顶部和底部添加圆角，避免了单元格间可能出现的视觉问题，更干净利落。你可以根据需要调整`10px`的值来控制圆角的弧度。选择哪种方法取决于你的具体需求和对视觉效果的偏好。方法二通常被认为是更优雅和可靠的解决方案。

和

)

我们可以将border-radius应用于表格单元格(

和

)，并通过display: table-cell属性模拟表格单元格的布局：

td, th {
  border-radius: 10px; /* 调整圆角大小 */
  display: table-cell;
}

这种方法简便易行，但可能会导致单元格间出现细微的视觉差异。

方法二：使用伪类选择器

MiniMax开放平台

MiniMax-与用户共创智能，新一代通用大模型

下载

更精确的方法是使用tr:first-child和tr:last-child伪类选择器，分别为表格的第一行和最后一行设置圆角：

tr:first-child {
  border-radius: 10px 10px 0 0; /* 上部圆角 */
}

tr:last-child {
  border-radius: 0 0 10px 10px; /* 下部圆角 */
}

这种方法只为表格的顶部和底部添加圆角，避免了单元格间可能出现的视觉问题，更干净利落。你可以根据需要调整10px的值来控制圆角的弧度。

选择哪种方法取决于你的具体需求和对视觉效果的偏好。方法二通常被认为是更优雅和可靠的解决方案。