直接给table设border-top-right-radius无效，因默认border-collapse:collapse使table无外边框轮廓且边框实际在th/td上；须改用border-collapse:separate、border-spacing:0，并在th:last-child上设圆角及统一边框样式。

直接给 table 写 border-top-right-radius 为什么没效果

因为浏览器渲染表格时，默认启用 border-collapse: collapse，此时表格没有独立的“外边框轮廓”，border-top-right-radius 失去作用对象；更关键的是，边框实际画在 th 和 td 上，不是 table 元素本身。

必须先切换为 border-collapse: separate

这是前提条件，否则所有圆角设置都会被忽略：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• table 必须设为 border-collapse: separate
• 同时加 border-spacing: 0，避免单元格间出现空白缝隙
• 不要给 table 直接设 border，边框应落在 th/td 上

右上角圆角要写在表头最后一个 th 上

只有这个单元格的右上角才是整个表格视觉上的右上角：

• th:last-child 是最稳妥的选择（兼容 colspan 场景）
• 值用 px 或 % 都可以，但注意：% 是按该 th 宽度计算的，不是整张表宽度
• 如果表头行有多个 th，且最后一个 th 被 colspan 占满，仍适用
• 示例：th:last-child { border-top-right-radius: 8px; }

别漏掉边框样式和颜色一致性

圆角只定义形状，不自带边框线。若视觉上“断开”，大概率是边框没对齐：

• th:last-child 和它左侧相邻的 th 必须有相同 border 样式、宽度、颜色
• 推荐统一写在 th, td 上，比如：th, td { border: 1px solid #ccc; }
• 若只给 th:last-child 单独加边框，会导致右侧多出一条线，破坏圆角衔接

实际生效依赖三个动作同时到位：分离边框模型 + 精准定位到右上角单元格 + 边框连贯无断裂。少一个环节，圆角就“看不见”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！