必须为设置border-collapse: collapse以消除单元格默认间距，再统一给和设置border: 1px solid #d0d0d0及较小padding（如3px 5px），并重置table的margin/padding；高dpi下可用box-shadow模拟细线，打印需@media print单独处理。

用 border-collapse: collapse 消除默认单元格间距

浏览器默认渲染表格时，<table> 的单元格之间有 2px 左右的间隙，看起来像“虚线”或“粗边”，这不是你想要的细线。关键不是加 <code>border，而是先关掉这个默认分离模式。必须给 <table> 设置 <code>border-collapse: collapse，否则无论你怎么设 border-width: 1px，都可能看到双线或空隙。

常见错误是只写 border: 1px solid #ccc 却漏掉 border-collapse，结果边框又重又不连贯。

• 必须写在 <table> 元素上，不能只写在 <code><td> 或 <code><th> 上 <li>兼容性极好，IE8+ 都支持</li> <li>一旦启用，所有相邻边框会合并为一条线，这是实现真正“细线”的前提</li> <h3>给 <code><td> 和 <code><th> 统一设细边框 <p>仅靠 <code>border-collapse 不够，还得明确指定每个单元格的边框样式。推荐用简写：border: 1px solid #d0d0d0。颜色选浅灰（如 #d0d0d0 或 #e0e0e0）比纯黑更柔和，视觉上更“细”。

  注意：如果只给 <table> 加边框，外框会细，但内部格线依然缺失；必须作用到单元格级。 <ul><li><code><th> 和 <code><td> 都要设，否则表头和内容列边框不一致 <li>避免用 <code>border-top/border-left 单独设置——容易漏边、难维护

• 若需“无外框只有内线”，可额外给 <table> 加 <code>border: none

  去掉默认内边距让线条更紧凑

  默认 <td> 有 <code>padding: 2px，会让文字离边框太远，削弱“细线感”。建议统一设为 padding: 4px 6px 或更小（如 3px），既保证可读性，又让边框更贴近内容。

  另外，<table> 自身可能有默认 <code>margin 或 display 行为，建议显式重置：

  table {
    border-collapse: collapse;
    margin: 0;
    padding: 0;
  }
  td, th {
    border: 1px solid #d0d0d0;
    padding: 3px 5px;
    margin: 0;
  }

  响应式场景下避免细线被缩放模糊

  在高 DPI 屏幕（如 MacBook Retina、安卓高端机）或页面缩放为 125% 时，1px 边框可能被渲染成 1.25 物理像素，出现发虚、发灰现象。这不是 bug，是浏览器抗锯齿行为。

  

  Wechat HTML Publisher

  直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

  下载

  解决思路不是加粗，而是用 transform: scaleY(0.99) 类微调（慎用），更稳妥的是换用 box-shadow 模拟细线：

  td, th {
    box-shadow: 0 0 0 1px #d0d0d0;
    border: none;
  }

  这样能绕过像素对齐问题，但要注意：该写法不支持圆角边框，且在部分旧 Android WebView 中兼容性略差。

  真正难处理的其实是打印样式——很多浏览器打印预览里 1px 会自动加粗。如果表格要打印，得单独写 @media print 规则，把边框提到 0.75px 或改用 background-image 拼接细线。

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