直接给 <table> 加 border-radius 无效是因为 border-collapse: collapse 会忽略圆角；解决方案包括用 outline 替代 border、外层 div 包裹或对特定单元格单独设圆角。
直接给 <table> 加 border-radius 为什么没反应？
因为浏览器对 <table> 的渲染机制特殊：当启用 border-collapse: collapse（绝大多数框架、生成器默认开启）时，border-radius 会被忽略——单元格边框被“合并”成一条线，圆角失去作用对象。这不是你写错了，是 CSS 盒模型在表格上的限制。
常见错误现象：border-radius: 8px 写了但边缘还是直角；加了 overflow: hidden 也没用；检查 computed style 发现 radius 值存在，但视觉无变化。
- 别试图靠给
<th>/<td>单独加border-radius拼凑效果——容易出现边框断裂、间隙或重叠 - 不要依赖
border属性来“撑出”圆角，它和collapse冲突，反而让问题更隐蔽 - 现代浏览器（Chrome 110+、Firefox 102+、Safari 16.4+）已完全支持 outline + offset 方案，无需前缀
outline 替代 border 是最稳的方案
用 outline 绕过 border-collapse 的限制，它不参与盒布局，不受合并影响，配合 outline-offset 可精准贴合表格外缘。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 保留原有
border-collapse: collapse和单元格内边框（如th, td { border: 1px solid #e0e0e0; }） - 只在
<table>上设置：border-radius: 8px、overflow: hidden、outline: 2px solid #4a90e2、outline-offset: -2px - 避免用
outline-offset: -1px这类小数值，容易因 subpixel 渲染导致模糊或错位，推荐与 outline 宽度等值取负 - 如果表格有 hover 或 active 状态，outline 同样可动画，但 border-radius 不支持过渡，需用 transform 缩放模拟“膨胀感”
需要阴影或复杂背景时，优先套一层 <div>
当表格要加 box-shadow、渐变背景、或需要与其他元素（如卡片容器）保持统一圆角节奏时，outline 就不够用了——它无法投影，也不能被 background 覆盖。
这时最稳妥的做法是包裹容器：
- 外层
<div class="table-wrapper">承担border-radius和overflow: hidden - 内部
<table>保持原样式，去掉所有外边框相关设置（包括 outline） - 若需外边框，直接设在 wrapper 上：
border: 1px solid #d0d0d0，它会自然圆角 - 该方案兼容 IE11（需加
display: inline-block防塌陷），也方便后续加 padding/margin 控制呼吸感
只圆顶部或底部？用伪类比改 HTML 更安全
某些设计稿只要表头或表尾圆角（比如带筛选栏的表格），没必要全局处理。此时用 :first-child 和 :last-child 配合 border-top-left-radius 等独立属性，比缩写更可控。
示例（仅圆表头行）：
tr:first-child th:first-child { border-top-left-radius: 6px; }
tr:first-child th:last-child { border-top-right-radius: 6px; }
tr:last-child td:first-child { border-bottom-left-radius: 6px; }
tr:last-child td:last-child { border-bottom-right-radius: 6px; }
注意点：
- 必须确保
th和td有显式边框（哪怕只是 1px transparent），否则圆角裁剪区域不可见 - 如果表格用了
<thead>/<tbody>结构，优先选thead tr:first-child而非tr:first-child，避免误匹配 tbody 中的行 - 不要用
tr:first-child td—— 这会把第一行所有单元格都圆角，破坏数据列对齐
真正难的不是怎么写那几行 CSS，而是判断该用哪条路径：要不要动 HTML 结构、是否必须支持旧浏览器、有没有阴影或交互需求。选错方案，后期维护成本会指数级上升。
