table加border-radius无效是因为border-collapse:collapse与圆角不兼容，浏览器不将table视为可裁剪的独立盒；可靠解法是外层div设border-radius+overflow:hidden，或改用display:grid/flex模拟表格。
table 元素加 border-radius 为什么没效果？
因为浏览器对 table 的渲染逻辑特殊：当启用 border-collapse: collapse（现代框架和生成器默认行为）时，单元格边框被合并为共享线，border-radius 完全被忽略——不是你写错了，是盒模型根本没给它生效的机会。
常见错误现象包括：
- 写了
border-radius: 8px但表格四角依然尖锐 - 单元格
th/td单独设圆角，只在首尾列局部生效，中间列无效 - 圆角区域被内部直角内容“顶破”，视觉上不连贯
根本原因在于：圆角需要作用在一个能独立裁剪的盒容器上，而 table 在 collapse 模式下不是一个标准盒。
给单元格（th/td）设圆角的实操条件
必须同时满足以下三点，否则圆角会错位或失效：
- 使用
border-collapse: separate（禁用合并边框） - 为
th/td显式设置border（不能依赖继承或 collapse 后的隐式边框） - 配合
overflow: hidden在父级（如tr或外层容器）上启用，否则背景/内容会溢出圆角范围
示例关键 CSS：
.my-table {
border-collapse: separate;
border-spacing: 0;
}
.my-table th,
.my-table td {
border: 1px solid #ddd;
padding: 8px;
}
.my-table thead th:first-child { border-top-left-radius: 6px; }
.my-table thead th:last-child { border-top-right-radius: 6px; }
.my-table tbody tr:first-child td:first-child { border-bottom-left-radius: 6px; }
.my-table tbody tr:first-child td:last-child { border-bottom-right-radius: 6px; }
注意：圆角方向要严格匹配位置（如左上角用 border-top-left-radius），且仅适用于独立边框场景。
为什么推荐用外层 div 包裹而非硬改 table？
因为真实项目中，表格往往来自框架（如 Bootstrap、Element Plus）或服务端模板，直接改 border-collapse 可能破坏原有边框逻辑、响应式行为或 JS 插件样式钩子。
更稳妥的做法是：
- 给
table套一层div.table-container - 在该
div上设border-radius和overflow: hidden - 表格自身保持
border-collapse: collapse不变 - 若需强化视觉圆角，可额外加
outline或border到容器上（避开 collapse 冲突）
这样既不碰表格结构，又能确保圆角稳定裁剪，还兼容阴影、渐变等复杂背景。
sticky 列滚动时圆角“露底”怎么修？
粘性列（position: sticky）和表头是两个独立 DOM，各自设圆角后滚动时交界处容易错开，导致背景色从缺口渗出。
关键修复点：
- 外层容器（如
.table-container）必须设overflow: hidden - 粘性列（如
.sticky-col）用border-radius: 8px 0 0 8px（仅左侧） - 表头首单元格（
thead th:first-child）用border-radius: 8px 0 0 0对齐 - 确保两者
border-radius数值完全一致，单位统一（推荐px或em，避免混用 %）
漏掉任意一点，滚动时都可能看到“撕裂感”。
圆角在表格里从来不是单纯加个属性的事——它本质是布局控制、渲染限制与视觉对齐的综合问题。最容易被忽略的是 overflow: hidden 的位置层级和 border-collapse 模式的连锁反应。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
