能落地的三步法是：第一步用 border-image 替代 border；第二步改用 border-collapse: separate 并单独设 border；第三步用 js 动态注入 dpr 感知样式。
为什么 border: 1px 在表格里特别糊
表格的 <td> 和 <code><th> 元素默认用 <code>border-collapse: collapse，但 Safari 和 iOS WebKit 对 collapsed border 的亚像素渲染极其不友好——哪怕你写了 border: 0.5px，它也可能被四舍五入成 0 或 1 CSS px，再映射成 2 物理像素，结果就是整行边框发虚、粗细不均、甚至断开。更麻烦的是，transform: scale() 在 <td> 上直接失效（浏览器忽略），伪元素也常被 table 渲染模型截断或错位。
<h3><code><td> 上还能用伪元素模拟 1px 边框吗
<p>基本不能。table-cell 的盒模型限制导致 <code>::before/::after 无法可靠定位，且 position: absolute 在 <td> 内部会被强制重置为 static。实测中常见问题包括：伪元素被裁剪、上下边框错位、圆角消失、滚动时边框跳动。若硬要上，必须把 <code><td> 改成 <code>display: block，但这会破坏表格语义和可访问性，也不兼容屏幕阅读器。
真正能落地的三步法
不用猜、不试错，直接按顺序做：
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 第一步：用
border-image替代border—— 比如border-image: linear-gradient(to right, #ccc, #ccc) 1，配合border-width: 1px，它绕过浏览器对 border-width 的物理像素换算，直接控制渲染采样 - 第二步：对
border-collapse: collapse表格，强制加border-spacing: 0并改用border-collapse: separate，再给每个<td> 单独设 <code>border，这样每条边都能独立控制缩放逻辑 - 第三步：JS 动态注入 DPR 感知样式 —— 不依赖媒体查询，而是读取
window.devicePixelRatio，生成内联 style：td { border-width: calc(1px / var(--dpr, 1)); }，并在中注入:root { --dpr: 2; }
容易被忽略的兼容细节
最常漏掉的是 <colgroup></colgroup> 和 <col> 的宽度继承问题：当用 border-image 或缩放方案后，列宽若用 px 固定值，会在高 DPR 下因亚像素累积导致最后一列偏移。解决方案只有两个：要么全用 % 或 fr，要么用 JS 监听 resize + dpr 变化，动态重算 <col> 的 width 属性。另外，outline 和 box-shadow 在表格单元格上同样受 DPR 影响，别指望它们能“自动变细”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
