border-radius 对 table 无效是因为 border-collapse: collapse 合并边框导致圆角失去作用对象，且边框实际属于 th/td 而非 table；正确解法是改用 separate 模式并精细化设置首尾单元格圆角，或外层包裹 div 添加圆角与边框。
table 元素直接加 border-radius 为什么没反应？
因为 border-collapse: collapse 会破坏 border-radius 渲染逻辑——浏览器把所有单元格边框“合并”成一条线，导致圆角计算失效。哪怕你写了 border-radius: 8px，只要表格用了 collapse 模式，四个角照样是直的。
这不是 bug，是规范行为。别试 !important 或强行改 border-collapse: separate，后者会让内部边框重复、错位，更难看。
- 检查当前表格是否用了
border-collapse: collapse（多数框架、生成器默认启用） - 确认
table元素本身有显式 border 或 outline，否则圆角区域不可见 - 不要只依赖
border-radius，必须配合裁剪机制
用 overflow: hidden + border-radius 的真实限制
这个组合能“遮住”直角溢出部分，但前提是外层容器或 table 自身要能形成独立的块级渲染上下文。如果表格嵌在 flex 或 grid 容器里，且父元素没设宽高或 min-width，overflow: hidden 可能被忽略，圆角依然穿帮。
-
table必须是块级（默认就是），不能是display: inline-table - 若表格内容超宽触发横向滚动，
overflow: hidden会把滚动条也干掉——这时得换方案 - 移动端 Safari 对
overflow: hidden在table上的支持略保守，建议加-webkit-mask备用（仅 iOS 15.4+）
不用重写 HTML，用 outline 替代 border 的关键写法
当 border-collapse: collapse 不可更改时，outline 是最轻量的绕过方案：它不参与盒模型，不受 collapse 影响，还能用 outline-offset 精准贴合边缘。
示例 CSS：
.tg {
border-collapse: collapse;
border-radius: 0.75em;
overflow: hidden;
outline: 2px solid #4a90e2;
outline-offset: -2px;
}
-
outline-offset必须为负值，且绝对值等于outline-width，否则轮廓会漂移 - 避免用
outline: auto，它在不同浏览器下表现不一致 - 如果表格已有
border，先清空：border: none，否则 outline 和 border 叠在一起
响应式圆角该用 px 还是 em？
用 em 更稳妥。比如 border-radius: 0.5em 会随字体缩放自动调整，适配高 DPI 屏和用户系统字号设置；而固定 8px 在 200% 缩放下会显得生硬。
- 别用
%值——表格宽高不固定，border-radius: 5%在不同尺寸下结果差异极大 - 推荐范围：
0.3em（紧凑型数据表）到1.2em（展示型仪表盘） - 如果项目强制要求像素单位，至少加媒体查询：
@media (prefers-reduced-motion: reduce)下降级为0px
真正麻烦的不是怎么写样式，而是表格结构本身——如果 th 或 td 里塞了 padding、line-height 或内联样式，圆角边缘可能被内容顶破。动手前先 inspect 元素，确认最外层 table 的盒模型边界是干净的。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
