直接给 加 border-radius 无效，因 border-collapse: collapse 使表格失去独立外轮廓；最稳妥方案是用外层 包裹并设置 overflow: hidden 裁剪溢出。

直接给 <table> 加 <code>border-radius 大概率无效，尤其当用了 border-collapse: collapse ——这不是你写错了，是浏览器根本不会渲染它。

为什么 border-radius 在 <table> 上不生效<p>表格的圆角失效不是 bug，而是渲染机制决定的：</p> <ul><li> <code>border-collapse: collapse 会让单元格边框“合并成一条线”，<table> 自身失去独立外轮廓，<code>border-radius 失去作用对象

即使你给 <table> 写了 <code>border 和 border-radius，只要 th/td 自己也有边框（比如来自框架或重置样式），实际视觉边界仍由单元格控制

圆角需要可裁剪的“实体区域”，而默认 <table> 没有背景、没有显式边框、且 <code>overflow 对表格元素行为不稳定

最稳妥的方案：外层 <div> 包裹 + <code>overflow: hidden

不改 HTML 结构、不碰 border-collapse、兼容所有现代浏览器。核心就三行 CSS：

Doc To HTML

使用 MinerU 文档处理引擎将 Word 文档（.doc、.docx）转换为保留结构和格式的干净 HTML。

下载

@@######@@

• 必须用 <div class="table-wrapper"><table>...</table></div> 包一层，不能只靠 <table> 自身<li> <code>overflow: hidden 是关键——它会裁掉表格内部单元格直角溢出的部分，让圆角“露出来”
• 用 outline 而非 border，是因为 outline 不参与盒模型，不受 collapse 影响；outline-offset: -2px 让它紧贴表格边缘
• 如果已有全局 table { border: 1px solid #ddd }，建议删掉或用 outline 替代，否则内外边框可能错位

如果必须用 border-collapse: separate

适合能控制表格结构、且需要精细控制每个角的场景（比如表头左上/右上、末行左下/右下）：

.table-wrapper {
  border-radius: 8px;
  overflow: hidden;
  /* 可选：加 outline 模拟外边框，避免和内部 border 冲突 */
  outline: 2px solid #e0e0e0;
  outline-offset: -2px;
}
<p>.table-wrapper table {
border-collapse: collapse;
width: 100%;
}
</p>

• border-spacing: 0 必须设，否则单元格间隙会破坏圆角连续性
• 圆角只能加在具体单元格上（th/td），<table> 的 <code>border-radius 仅作兜底（部分浏览器支持）
• 如果表格有 colspan 或 rowspan，:first-child/:last-child 选择器可能失效，得改用类名定位
• 这种写法在 Safari 旧版本中对 border-radius 渲染不稳定，生产环境建议加 @supports 降级

容易被忽略的细节

很多“圆角失败”其实卡在这些地方：

• 父容器设置了 overflow: hidden，但没给 .table-wrapper 设高度或最小尺寸，导致裁剪范围不可控
• 表格里用了 vertical-align: bottom 或 line-height 过大，让文字下沉，视觉上像圆角被“顶破”
• 加了 box-shadow 后圆角消失——因为阴影默认从元素原始矩形区域出发，需配合 overflow: hidden 才能同步裁剪
• 动态渲染表格（如 Vue/React）时，CSS 类名没及时挂载，或 JS 插入的 <table> 没套 <code><div> 包裹层 <pre class="brush:php;toolbar:false;">table { border-collapse: separate; border-spacing: 0; border-radius: 8px; overflow: hidden; /* 依然需要，防止内容撑破 */ } &lt;p&gt;th:first-child { border-top-left-radius: 8px; }&lt;/p&gt;&lt;p&gt;th:last-child { border-top-right-radius: 8px; }&lt;/p&gt;&lt;p&gt;tr:last-child &gt; td:first-child { border-bottom-left-radius: 8px; }&lt;/p&gt;&lt;p&gt;tr:last-child &gt; td:last-child { border-bottom-right-radius: 8px; } &lt;/p&gt;</pre> </div>