直接写 border="1" 的表格边框显得厚重，因为 HTML 原生 border 属性仅支持整数像素值，且浏览器默认采用分离边框模型并添加 border-spacing，导致多层边框叠加与间隙形成“糊边”；必须对 table 设置 border-collapse: collapse 才能使相邻边框真正合并为一条线，再配合 rgba(0,0,0,0.08) 边框色、合理 padding 与适度降权的文字颜色，才能实现视觉轻盈。
为什么直接写 border="1" 的表格边框显得厚重
因为 HTML 原生 border 属性只能设整数像素值（如 1、2），且浏览器会额外渲染默认的 border-spacing 和分离边框模型，导致视觉上粗、毛、有间隙。哪怕设成 border="1"，实际看到的也不是一条干净的 1px 线，而是多个边框叠加+间距形成的“糊边”。
border-collapse: collapse 是轻盈边框的前提
不加这句，th 和 td 各自的 border 会并排显示，哪怕都设 1px solid #eee，相邻单元格之间也会出现“双线感”。必须把这句加在 table 上：
table {
border-collapse: collapse;
}
- 它让所有相邻边框（横向和纵向）真正合并为一条线，消除冗余像素
- 必须作用于
table元素本身，写在th或td上无效 - IE8+ 和所有现代浏览器都支持，无兼容性风险
用 border + color + opacity 控制视觉重量
真正让边框“轻盈”的不是变细，而是降低存在感。推荐组合：
th, td {
border: 1px solid rgba(0, 0, 0, 0.08);
padding: 10px 12px;
}
-
rgba(0, 0, 0, 0.08)比纯灰#eee更自然，尤其在白色背景上更透气 - 避免用
border: 0.5px—— CSS 不支持 sub-pixel 边框宽度，会被四舍五入或渲染异常 - 如果需要更细，可改用
box-shadow: 0 1px 0 rgba(0,0,0,0.04)模拟下边线，仅对td应用，避开顶部重复
别忽略 padding 和字体对比度的影响
边框再细，内容贴着边框挤在一起，视觉上依然“重”。真正轻盈感来自留白与对比平衡：
立即学习“前端免费学习笔记（深入）”；
-
padding至少设8px以上，10px 12px是较安全的起点 - 表头
th的字体颜色别用纯黑（#000），改用#333或rgba(0,0,0,0.8)，降低整体视觉强度 - 整张表加
font-size: 14px而非默认16px，配合细边框更协调
轻盈不是靠删减，是靠克制——边框颜色淡一点、间距松一点、文字灰一点，三者缺一不可。最容易被忽略的是：把 border-collapse: collapse 写在 table 上之后，忘了给 th 和 td 都加 border，结果只有外框有线，内部空荡荡。
