必须为<table>设置border-collapse: collapse以消除单元格默认间距，再统一给<td>和<th>设置border: 1px solid #d0d0d0及较小padding（如3px 5px），并重置table的margin/padding；高DPI下可用box-shadow模拟细线，打印需@media print单独处理。
用 border-collapse: collapse 消除默认单元格间距
浏览器默认渲染表格时，<table> 的单元格之间有 2px 左右的间隙，看起来像“虚线”或“粗边”，这不是你想要的细线。关键不是加 border，而是先关掉这个默认分离模式。必须给 <table> 设置 border-collapse: collapse，否则无论你怎么设 border-width: 1px，都可能看到双线或空隙。
常见错误是只写 border: 1px solid #ccc 却漏掉 border-collapse，结果边框又重又不连贯。
- 必须写在
<table>元素上，不能只写在<td>或<th>上 - 兼容性极好，IE8+ 都支持
- 一旦启用，所有相邻边框会合并为一条线，这是实现真正“细线”的前提
给 <td> 和 <th> 统一设细边框
仅靠 border-collapse 不够，还得明确指定每个单元格的边框样式。推荐用简写：border: 1px solid #d0d0d0。颜色选浅灰（如 #d0d0d0 或 #e0e0e0）比纯黑更柔和，视觉上更“细”。
注意：如果只给 <table> 加边框，外框会细，但内部格线依然缺失；必须作用到单元格级。
立即学习“前端免费学习笔记（深入）”；
-
<th>和<td>都要设，否则表头和内容列边框不一致 - 避免用
border-top/border-left单独设置——容易漏边、难维护 - 若需“无外框只有内线”，可额外给
<table>加border: none
去掉默认内边距让线条更紧凑
默认 <td> 有 padding: 2px，会让文字离边框太远，削弱“细线感”。建议统一设为 padding: 4px 6px 或更小（如 3px），既保证可读性，又让边框更贴近内容。
另外，<table> 自身可能有默认 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，是浏览器抗锯齿行为。
解决思路不是加粗，而是用 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 拼接细线。
