border-radius 对 table 无效主因是 border-collapse: collapse 导致 table 无连续外边框，且单元格直角顶破圆角；最简解法是 table{border-radius:4px;overflow:hidden;border:1px solid #ddd}。

直接给 table 元素加 border-radius 通常没反应——不是写错了，是它根本没地方生效。

为什么 border-radius 对 table 不起作用

绝大多数表格默认用了 border-collapse: collapse，浏览器会把所有单元格边框“压”成一条线，table 自身没有连续、可渲染的外边框轮廓，border-radius 就失去了作用对象。更关键的是，th 和 td 自带边框时，它们的直角会直接顶破圆角边界，视觉上还是方的。

检查开发者工具里的 computed styles，如果 table 的 border 显示为 none 或极小值，说明边框实际来自单元格，不是 table 本身。

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

最简方案：用 overflow: hidden 裁剪出圆角

不改 HTML 结构、不碰 border-collapse，靠 CSS 裁剪硬“压出”微弧效果。核心就三行：

table {
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid #ddd;
}

• border 必须写在 table 上，不能只写在 th/td；否则裁剪无目标
• overflow: hidden 是关键，它会把超出圆角范围的单元格直角部分裁掉
• 微弧建议用 2px～4px，比固定像素更稳妥；避免用 % 单位，部分安卓 WebView 会失效
• 如果表格里有 box-shadow、绝对定位元素或滚动条，overflow: hidden 可能意外截断它们

精确控制四角：改用 border-collapse: separate

想让左上、右上、右下、左下各自带独立微弧（比如 border-top-left-radius: 2px），就得放弃 collapse，改用 separate 模式，并把圆角分配到首尾单元格：

table {
  border-collapse: separate;
  border-spacing: 0;
}
th:first-child,
td:first-child {
  border-top-left-radius: 2px;
  border-bottom-left-radius: 2px;
}
th:last-child,
td:last-child {
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
}

• 必须同时设 border-spacing: 0，否则单元格间会出现缝隙
• 圆角要写在 th/td 上，而不是 tr 或 table——因为 tr 本身不渲染边框
• 如果表头有多行（<thead> 多个 <code><tr>），需额外处理第一行和最后一行的 <code>th
• 这个方案在老版 Edge（≤18）中可能有轻微锯齿，但 Chrome/Firefox/Safari（iOS 14+）都稳定

真正容易被忽略的点是：微弧效果是否可见，不取决于你写了多少行 CSS，而取决于哪一层真正画出了边框、有没有被其他元素顶破或裁掉。先打开开发者工具，确认 table 是否有实色边框、th/td 边框是否为 none，再动手调样式。

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