border-radius对table无效是因border-collapse:collapse导致外边框不连续；最简方案是table加border-radius和overflow:hidden，并配outline+outline-offset实现圆角。

直接给 <table> 加 <code>border-radius 基本无效——不是你漏写了，是浏览器规范决定的。 核心障碍是 border-collapse: collapse（几乎所有框架、CMS、Bootstrap 默认启用），它让表格失去独立外轮廓，border-radius 就没地方生效。

为什么 border-radius 在 <table> 上不显示？ <p>常见现象：写了 <code>border-radius: 8px，但四个角还是尖的；或者外层有圆角，内部单元格直角“顶出来”，破坏整体感。

• border-collapse: collapse 会强制合并单元格边框，<table> 自身不再渲染连续外边框，圆角无作用对象 <li>即使给 <code><table> 加了 <code>border，只要 <th>/<code><td> 也有边框，它们的直角就会溢出圆角边界 <li> <code>border-radius 对 <table> 的单个角（如 <code>border-bottom-left-radius）同样无效，必须作用于具体单元格

  最简可靠方案：用 overflow: hidden + border-radius 套住整个表格

  不改 HTML 结构，兼容现代浏览器，且保持 border-collapse: collapse 的整洁性。

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载
  • 给 <table> 元素同时设置 <code>border-radius 和 overflow: hidden —— 后者才是关键，它裁掉超出圆角的单元格直角
  • 必须确保 <table> 有显式边框（<code>border 或 outline），否则视觉上看不到圆角轮廓
  • 推荐用 outline 模拟外边框：outline: 2px solid #e0e0e0 + outline-offset: -2px，避免与内部 border-collapse 冲突
  • 单位优先用 em 或 rem，比如 border-radius: 0.75em，响应式缩放更稳定；% 在 <table> 上基本无效 <h3>只圆特定角？得操作 <code><th> 和 <code><td> 单元格 <p>比如只要左上、右上两个角圆，其他保持直角，就必须放弃 <code>collapse，切到 separate 模式再精准控制。
    • 先设 border-collapse: separate + border-spacing: 0，消除间隙但保留独立边框
    • 顶部圆角：给 <th> 第一个和最后一个子元素分别加 <code>border-top-left-radius 和 border-top-right-radius
    • 底部圆角：用 tr:last-child > td:first-child 和 tr:last-child > td:last-child 定位左下、右下角
    • 注意 colspan/rowspan 会打乱选择器逻辑，需额外调整，比如加类名或用 :nth-child() 精确匹配

    容易被忽略的细节

    很多人试了 wrapper 方案却失败，往往卡在三个地方：没加 overflow: hidden、outline-offset 没配负值、或表格本身有 margin 撑出容器边界。尤其 outline-offset: -2px 必须等于 outline-width，差 1px 都会留白或溢出——这不是微调，是硬性匹配关系。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！