如何为HTML的<tbody>元素添加border-radius圆角样式？

嘿，这个问题我太熟了！tbody直接加border-radius没效果，大概率是表格默认的渲染规则在搞鬼——浏览器默认会把table、thead、tbody这些元素当成一个整体处理，而且border-collapse: collapse（边框合并）的规则会直接把圆角给“吃掉”。

给你两个靠谱的解决方案，按需选就行：

方法1：调整表格渲染模式，让tbody直接支持圆角 #

这个方法更直观，核心是把表格的边框合并模式改成分离，再配合overflow裁剪圆角：

table {
  border-collapse: separate; /* 取消边框合并 */
  border-spacing: 0; /* 消除单元格之间的空隙 */
  overflow: hidden; /* 关键！让表格容器把tbody的圆角裁剪出来 */
}

tbody {
  border-radius: 8px; /* 换成你想要的圆角大小 */
  border: 2px solid #ddd; /* 你的边框样式 */
}

要是页面里还有thead，记得把thead的底部边框去掉，不然会和tbody的上边框重叠，显得突兀。

方法2：用单元格圆角模拟tbody整体圆角 #

如果需要兼容旧浏览器（比如IE），这个方法更稳妥——直接给tbody首尾行的边角单元格单独加圆角：

table {
  border-collapse: collapse; /* 保持边框合并模式 */
}

tbody {
  border: 2px solid #ddd;
  border-top: none; /* 适配thead存在的情况，避免重复边框 */
}

/* 给tbody第一行的左右单元格加上上圆角 */
tbody tr:first-child td:first-child {
  border-top-left-radius: 8px;
}
tbody tr:first-child td:last-child {
  border-top-right-radius: 8px;
}

/* 给tbody最后一行的左右单元格加上下圆角 */
tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

这种方法兼容性拉满，就是代码稍微多一点，但胜在稳定。

另外提个小细节：如果tbody有背景色，一定要给表格加上overflow: hidden，不然背景色会跑到圆角外面去，破坏效果。

你可以先试试第一种方法，我之前做项目的时候用这个解决过一模一样的问题，亲测有效！

内容的提问来源于stack exchange，提问作者Adee