table加border-style:double只在外框生效，是因为该样式仅作用于明确设置的元素；若未同时为td/th设置相同double边框并启用border-collapse:collapse，内部格线仍为默认单线或空白。

table加border-style: double为什么只在外框生效？

因为border-style: double只作用于你明确设置它的元素。给<table>加<code>border: 3px double #000，只会渲染外边框；内部单元格（<td>、<code><th>）默认没有边框，自然不显示双线。 <p>常见错误现象：表格看起来只有“一圈双线”，格子之间还是细单线，甚至空白缝隙——这是默认<code>border-collapse: separate导致的。

• 必须同时给<td>和<code><th>也设置<code>border: 3px double #333（或统一用 CSS 类）
• 必须设置border-collapse: collapse在<table>上，否则相邻单元格的双线会错位、重叠或留白 <li>宽度不能低于 2px：1px 的<code>double在多数浏览器里会退化为单线，建议起步用3px

为什么

不是双线边框？

border是 HTML 旧属性，它只控制“单一线条”的粗细，跟 CSS 的double完全无关。写<table border="2">等价于<code>border: 2px solid currentColor，只是加粗实线，不是两条平行线。

容易踩的坑：

• 误以为数字越大越像双线——其实无论border="5"还是border="10"，都只是更粗的单线
• 混用 HTML border 和 CSS border-style: double：前者会被后者覆盖，但逻辑混乱，调试困难
• 在现代项目中继续用border属性，会导致样式不可控、无法配色、无法响应式适配

td/th的border: double怎么对齐才不乱？

关键在border-collapse: collapse。一旦设为separate（默认值），每个<td>的双线边框是独立绘制的，左右/上下边不会自动对齐，结果就是线条错位、间距不均、视觉杂乱。 <p>正确做法：</p> <ul><li>给<code><table>加<code>style="border-collapse: collapse;"（或写入 CSS 规则）

• 所有<td>和<code><th>必须用相同<code>border-width（比如都是3px），否则双线高度不一致，拼接处露白
• 避免只给部分单元格设border：漏设的单元格会“透出”背景，破坏双线连续感

示例片段：


html-ppt-to-pdf
将使用 `
` 约定的 HTML 幻灯片转换为高保真、矢量文本 PDF（使用 Playwright + Chromium 原生 PDF 功能）。
下载

A

B

double边框能和border-radius一起用吗？

不能稳定共存。border-radius会让border-style: double在圆角处断裂、变形或完全失效，Chrome 和 Firefox 渲染结果不一致，Safari 更可能直接降级为单线。

如果你的设计稿要求“圆角 + 双线”，别硬套border-radius：

• 放弃double，改用box-shadow: 0 0 0 2px #000, 0 0 0 4px #000模拟双线外框（仅适用于外边框）
• 或者用伪元素::before画第二层边框，但需手动计算偏移，且对可访问性有影响
• 最稳妥的做法：接受双线边框必须是直角——这是 W3C 对double的原始定义，也是浏览器唯一保证一致渲染的方式

真正容易被忽略的点：双线效果依赖宽度+颜色+collapse三者缺一不可，少一个就不是双线，而是意外的单线、虚影或空白带。

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