直接写 border: none 无效，因浏览器默认对 table、th、td 分别渲染边框和内边距，且 border-collapse 默认为 separate；必须同时设置 table、th、td 的 border: none 并在 table 上声明 border-collapse: collapse，才能真正消除视觉缝隙与渲染抖动。
“无痕化排版”不是去掉所有样式，而是让表格视觉上“消失边框、不露结构、不抢焦点”，同时保持语义和可访问性——只靠 border: none 一定失败。
为什么直接写 border: none 没用
浏览器默认对 table、th、td 分别渲染边框和内边距，且默认 border-collapse: separate。只给 table 加 border: none，th 和 td 仍自带 UA 样式（比如 Chrome 的 border: 1px inset），视觉上就是一道白线或灰缝。
- DevTools 显示
border: none，但 iOS Safari 实际 sub-pixel 渲染可能漏出 0.5px 灰线 - 第三方框架（如 Bootstrap）常带
table { border-collapse: separate !important }，会覆盖你的设置 -
border="0"是 HTML5 废弃属性，在小程序（如 mp-html）里完全不生效
border-collapse: collapse 必须加在 table 上
这是真正切断“分离边框模型”的开关。它让相邻单元格的边框合并为一条线——哪怕这条线是 none，也能消除间隙；如果不设，th/td 的 border: none 在分离模型下依然可能因 border-spacing 或 UA 默认值显形。
- 只对
table元素生效，写在th或td上无效 - 必须和
border: none配合：单独用collapse反而会把可见边框压成更粗的一条 - mp-html 等受限环境必须用
tagStyle，且键名严格为table（小写），不能写成Table
真·无痕的关键不在边框，而在间距与对齐
即使所有边框都清空，th 和 td 的 padding、line-height、vertical-align 仍会制造“隐形结构感”。所谓“无痕”，其实是让内容像自然段落一样呼吸。
立即学习“前端免费学习笔记（深入）”；
- 统一设
padding: 0，再按需给特定列加padding-left/padding-right - 禁用默认居中：
th, td { text-align: left; vertical-align: top; } - 数字列若需右对齐，单独加类如
td.num { text-align: right; }，避免污染整体 - 移动端遇到渲染抖动，加
transform: translateZ(0)强制 GPU 加速，比调border更治本
当调试失效时，该换思路而不是死磕
反复检查 CSS 却仍有不可消除的线（尤其在微信小程序或旧版 Safari），说明你正在对抗表格渲染管线本身。这时候，“无痕”不是目标，而是手段。
- 纯布局场景：用
display: grid或display: flex模拟行列，彻底绕开table默认样式 - 数据展示场景：保留
table语义，但用role="presentation"告诉辅助技术“这仅作布局”，再配aria-hidden="true"隐藏非关键单元格 - 富文本环境（如 CMS 编辑器输出）：优先用
<div class="row"><div class="cell">+ CSS，比注入tagStyle更可控
最容易被忽略的点：无痕排版不是“看不见表格”，而是让表格退到后台——它的语义还在，可访问性没丢，但视觉上不再争夺注意力。真正难的不是删边框，是删掉人眼对“格子”的条件反射。
