如何设置HTML表格的圆角效果？OVERFLOW实现边框裁剪-html教程-PHP中文网

table 直接加 border-radius 无效是因为 border-collapse: collapse 合并了单元格边框，使 table 无独立外边框；需配合 overflow: hidden（作用于容器或设为 separate）及单独给 th/td 设圆角才生效。

如何设置html表格的圆角效果？overflow实现边框裁剪

table 直接加 border-radius 为什么没用

因为 border-collapse: collapse 是多数框架（如 Bootstrap）和现代表格的默认设置，它把相邻单元格边框“合并”成一条线，导致 table 元素本身没有可渲染的独立外边框轮廓，border-radius 就失去了作用对象——浏览器直接忽略它。

这不是 bug，是规范行为。哪怕你写了 border-radius: 8px 和 border: 1px solid #ccc，只要 border-collapse: collapse 开着，圆角就看不见。

常见错误现象：table 加了 border-radius，但四个角还是直的，甚至出现边框错位或虚线断裂
检查方法：用浏览器开发者工具看 computed styles，确认 border-collapse 值是不是 collapse
别指望靠 outline 或 box-shadow 替代——它们不参与布局，无法解决单元格直角溢出问题

overflow: hidden 是裁剪关键，不是可选项

border-radius 只负责“画圆角”，不裁剪内容；真正让直角单元格不穿出圆角区域的，是 overflow: hidden。漏掉这句，圆角只是个视觉边框，内部单元格照样顶到直角边缘。

但要注意：它必须作用在能包裹整个表格结构的容器上，或者直接加在 table 上（前提是 border-collapse: separate）。

如果表格嵌套在 div 里，给那个 div 加 overflow: hidden + border-radius 最稳妥（比如 .table-wrapper）
直接给 table 加 overflow: hidden 时，必须同时设 border-collapse: separate，否则部分浏览器会忽略 overflow
旧版 Safari 对 table 的 overflow: hidden 支持不稳定，建议优先用外层容器方案

border-collapse: separate + 精准控制单元格圆角

想保留边框合并感又要有圆角，就得放弃 collapse，改用 separate，再手动给特定单元格加 border-radius。这样圆角落在实际有边框的元素（th/td）上，才真正生效。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

典型写法是只圆表头左上、右上，和最后一行左下、右下：

th:first-child { border-top-left-radius: 6px; }
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; }

必须配 border-spacing: 0，否则 separate 模式下单元格间会有白缝
如果表格有 colspan 或动态列数，:first-child/:last-child 可能失效，得用类名精准定位（如 .corner-top-left）
圆角值建议用 em 或 px，避免用 %——单元格宽高不固定时，百分比圆角会失真

Bootstrap 表格怎么快速加圆角

Bootstrap 默认用 border-collapse: collapse，所以不能直接改 .table 类。推荐包一层容器，用 class 控制：

.table-container {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #dee2e6;
}

然后 HTML 这样写：

<div class="table-container">
  <table class="table">...</table>
</div>

不要给 .table 自己加 border-radius 或 overflow，它会被 Bootstrap 的重置样式覆盖
如果需要内边框也圆润，额外加 .table th, .table td { border: none; }，再用 table 的 border 统一控制
响应式断点下，table-container 宽度变化可能导致圆角被截断，记得配合 min-width 或媒体查询微调