html表格默认不支持直接设圆角，因border-collapse: separate使边框分散在单元格上，border-radius需作用于连续外边框实体；生效前提为border-collapse: collapse+overflow: hidden+显式border，或用外层div容器承载圆角。
HTML 表格本身不支持直接设圆角，必须靠 CSS 的 核心思路：关闭单元格边框分离，让 table 边框成为连续实体，再配合裁剪溢出内容。 文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。 真正卡住人的从来不是「怎么写」，而是没意识到 border-radius 配合正确渲染模式才能生效——但默认情况下它对 <table> 无效，因为表格的边框渲染逻辑特殊。<h3>为什么直接给 table 加 border-radius 没用</h3>
<p>浏览器默认把 <code><table> 当作「分离边框模型」（<code>border-collapse: separate），此时 border-radius 只作用于单个单元格（<td>/<code><th>），而 table 元素自身的边框被拆解、无法整体圆角。<ul>
<li>即使写了 <code>table { border-radius: 8px; overflow: hidden; }，也没效果
用 border-collapse: collapse + overflow: hidden 实现
border-collapse: collapse 和 overflow: hidden
<table> 加 <code>border（哪怕只是 1px solid transparent），否则 border-radius 无作用对象<th> 和最后一行 <code><td> 的上下边框需显式控制，避免圆角被遮盖<pre class="brush:php;toolbar:false;">table {
border-collapse: collapse;
border-radius: 10px;
overflow: hidden;
border: 1px solid #ddd; /* 必须有 border 才能圆角 */
}
th, td {
border: 1px solid #ddd;
}</pre>
<h3>更稳妥的方案：套一层容器 div</h3>
<p>绕过 table 渲染限制，用外层 <code><div> 承担圆角和裁剪职责，兼容性最好，适合复杂样式或需要阴影的场景。<ul><li>外层 <code><div class="table-wrapper"> 设 <code>border-radius 和 overflow: hidden<table> 保持默认 <code>border-collapse: separate，无需改边框模型<div class="table-wrapper">
<table>...</table>
</div>
<p>.table-wrapper {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}</p>
IE 和老版本 Edge 的兼容注意点
border-radius 在 IE9+ 原生支持，但 border-collapse: collapse + border-radius 组合在 IE11 及更早版本中仍可能失效。
<thead> 或 <code><tbody> 单独设 <code>border-radius —— 它们不是块级渲染容器，不会响应圆角overflow: hidden 在表格上的裁剪偶尔有闪烁，可加 transform: translateZ(0) 强制硬件加速border-radius 对 <table> 生效的前提是它得先有「一个可圆的边框实体」——而默认状态下，它没有。</table>
