table加border-radius无效是因为border-collapse: collapse会强制合并边框，使圆角被浏览器规范忽略；解决方法是用外层div wrapper配合overflow: hidden裁剪，或改用outline模拟外轮廓。
table 元素加 border-radius 为什么没效果
因为 border-collapse: collapse 会强制合并单元格边框，导致 border-radius 在 <table> 上完全被忽略——不是你写错了，是浏览器规范决定的。哪怕你写了 border-radius: 8px，只要用了 collapse，四个角依然尖锐。
常见错误现象：表格外层有圆角，但内部单元格直角“戳”出来；或者整个表格边框变虚、错位、甚至消失。
- 不要试图只给
<table>加border-radius并指望它生效 - 不要删掉
border-collapse: collapse后硬调border-spacing——容易引发边框双线、对齐偏移 - 避免在
<th>或<td>上单独设border-radius：各单元格独立圆角会破坏整体感，且首行/末行/首列/末列的圆角逻辑难统一
用 wrapper + overflow: hidden 实现兼容方案
最稳妥、无需 JS、不改 HTML 结构的做法，是套一层 <div class="table-wrapper">，把圆角和裁剪逻辑交给它。
关键点在于：圆角由 wrapper 控制，表格自身保持 border-collapse: collapse 不动，靠 overflow: hidden 把超出部分“砍掉”，视觉上就圆了。
立即学习“前端免费学习笔记（深入）”；
<div class="table-wrapper"><table>...</table></div>.table-wrapper { border-radius: 8px; overflow: hidden; }-
<table>保留原有border-collapse: collapse和边框定义 - 如果表格有外边框，建议用 wrapper 的
border或outline，而不是 table 自身的border（避免与 collapse 冲突）
outline 替代 border 实现无冲突外轮廓
当必须保留表格原生 border（比如某些 CMS 输出不可改），又想绕过 collapse 对 border-radius 的压制，outline 是更轻量的选择。
它不参与盒模型计算，不会影响布局，配合 outline-offset 可紧贴表格边缘模拟外边框。
.tg { border-radius: 0.75em; overflow: hidden; outline: 2px solid #4a6fa5; outline-offset: -2px; }- 注意
outline-offset必须为负值，且绝对值等于outline-width，否则会留白或溢出 - 不要用
box-shadow模拟边框：它不响应鼠标事件，且在高缩放下易模糊 - IE 不支持
outline-offset，如需兼容 IE，退回 wrapper 方案
响应式圆角怎么设才不崩
用 em 或 rem 单位比 px 更可靠，尤其当表格随字体缩放时；% 在 table 上基本无效——因为百分比基于宽高，而 table 的宽高常由内容撑开，不可控。
- 推荐
border-radius: 0.5em（对应当前 font-size 的一半），兼顾可读性与缩放一致性 - 避免
border-radius: 50%：除非你确定表格始终是正方形（几乎不可能） - 移动端小屏下，圆角过大（如
12px）会让表格头部/尾部信息被裁切，建议用媒体查询降级：@media (max-width: 480px) { .table-wrapper { border-radius: 4px; } } - 如果表格含固定高度行（如
height: 40px），圆角半径勿超过该值的一半，否则顶部/底部内容会被overflow: hidden截断
真正麻烦的不是写几行 CSS，而是判断该用 wrapper 还是 outline——取决于你能不能改 HTML 结构、要不要支持 IE、以及表格是否动态渲染（JS 插入后需确保 wrapper 已存在）。这两条路都绕不开 overflow: hidden，它既是解法，也是潜在的内容截断风险点。
