border-radius对<table>无效的主因是border-collapse:collapse导致边框共享且无独立外轮廓，真正带边框的是<th>/<td>;最稳妥方案是外层div包裹并设border-radius和overflow:hidden。
直接给 <table> 加 border-radius 大概率没反应——不是你写错了，是浏览器压根不渲染。
为什么 border-radius 对 <table> 无效？
核心原因有两个：border-collapse: collapse 和边框归属权错位。表格默认启用 collapse 模式，此时边框是“共享线”，没有独立外轮廓，border-radius 找不到作用对象；而真正带边框的是 <th> 和 <td>，不是 <table> 本身。
常见错误现象：
- 写了
border-radius: 8px但表格四角依然锋利 - 加了
overflow: hidden却发现表头文字被裁掉一半 - 用
outline模拟外边框后，圆角看起来“浮在表格外面”
最稳妥的方案：外层 <div> 包裹 + overflow: hidden
不改 HTML 结构、不碰 border-collapse、兼容所有现代浏览器。关键就两步：
立即学习“前端免费学习笔记（深入）”；
- 给外层
<div class="table-wrapper">设置border-radius和overflow: hidden -
<table>保持原样（包括border-collapse: collapse）
示例 CSS：
.table-wrapper {
border-radius: 0.75em;
overflow: hidden;
/* 可选：加个 outline 或 box-shadow 增强视觉边界感 */
outline: 2px solid #e0e0e0;
}
这个方法绕开了所有表格渲染机制限制，连 IE11 都能跑通。唯一要注意的是：如果表格内容高度超出容器，overflow: hidden 会真·隐藏，别指望它自动滚动。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
想只动 CSS？用 outline 替代 border 的技巧
当必须保留 border-collapse: collapse，又想让圆角“看起来生效”，outline 是目前最干净的 hack：
-
outline不参与盒模型，不受collapse影响 - 配合
outline-offset: -Xpx向内偏移，就能紧贴表格边缘 - 必须同时设
overflow: hidden，否则 outline 圆角会被单元格直角顶破
典型写法：
table {
border-collapse: collapse;
border-radius: 0.6em;
overflow: hidden;
outline: 2px solid #4a5568;
outline-offset: -2px;
}
注意：outline 无法设置不同边颜色或虚线样式，纯实色边框是它的硬性限制。
只圆首尾行？用伪类精准控制单元格
如果设计稿明确只要顶部两个角和底部两个角圆，且表格结构稳定（无动态增删行），直接操作单元格更可控：
-
th:first-child加border-top-left-radius -
th:last-child加border-top-right-radius -
tr:last-child td:first-child加border-bottom-left-radius -
tr:last-child td:last-child加border-bottom-right-radius
前提必须把 border-collapse 改成 separate，否则这些规则会被合并边框吞掉。顺带一提：border-spacing: 0 别漏，不然单元格之间会有白缝。
容易被忽略的点：圆角值最好用 em 或 rem，而不是固定 px。表格字体缩放时，1em 能随文本一起等比变化，避免小字号下圆角过大、大字号下圆角消失。
