css制作圆角表格

使用 border-radius 属性

为表格添加圆角边框，可以通过 border-radius 属性实现。该属性设置元素的圆角半径，适用于表格整体或单个单元格。

table {
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 10px;
  overflow: hidden;
}

单独设置单元格圆角

若需为特定单元格（如首行或首列）设置圆角，可以单独设置其边框半径。

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

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

兼容性处理

某些旧版本浏览器可能需要前缀支持。确保添加 -webkit- 和 -moz- 前缀以提高兼容性。

table {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

圆角与边框结合

圆角效果需与边框样式配合使用，否则可能不明显。建议为表格或单元格添加边框。

table {
  border: 1px solid #ddd;
  border-radius: 10px;
}

隐藏内部单元格溢出

为避免单元格内容破坏圆角效果，需设置 overflow: hidden 并确保 border-collapse 为 separate。

table {
  border-collapse: separate;
  overflow: hidden;
}