border-collapse: collapse 使相邻边框合并为一条线，消除默认separate模式下的间距与双线问题；需显式设置th/td边框、用padding替代无效的border-spacing，并配合颜色、对齐和响应式调整实现真正简洁。
border-collapse: collapse 为什么比默认值更干净
浏览器默认的表格边框是 border-collapse: separate，单元格之间有看不见的间距（border-spacing），导致边框出现双线、错位或留白。设成 collapse 后，相邻边框会合并为一条线，视觉上真正“连成一体”。
注意：一旦用了 collapse，border-spacing 就失效了，也不再支持 separate 下的单元格独立边框颜色/宽度控制——所有边框样式必须统一定义在 table、th 或 td 上。
常见错误：只给 table 加 border，但没给 th/td 设边框，结果只有外框，内部仍是空白——因为 collapse 模式下，内部边框需显式声明。
padding 控制文字呼吸感，别只靠 border-spacing
很多人想“拉开单元格距离”，第一反应是调 border-spacing，但它在 collapse 模式下无效。真正起作用的是 padding：它直接作用于每个 th 和 td 的内容区域，让文字和边框之间有留白，既干净又可控。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 统一设置
th, td { padding: 8px 12px; }，避免左右/上下不一致 - 如果表头需要更醒目，可单独加大
th { padding: 10px 12px; } - 避免对
table设置padding——它不会传递到单元格，纯属无效 - 移动端要注意：过大的
padding可能撑宽列宽，配合table-layout: fixed更稳妥
配合 color 和 border-color 做出真正的简洁感
“简洁”不等于“无设计”。用好颜色对比才能让结构清晰：
典型做法：
-
th { background-color: #f8f9fa; border-bottom: 2px solid #495057; }—— 表头底边加粗，暗示分隔 -
tr:nth-child(even) { background-color: #f8f9fa; }—— 隔行浅灰，提升可读性 -
td { border-bottom: 1px solid #dee2e6; }—— 每行底部细线，替代全边框，更轻量 - 慎用
border: 1px solid #dee2e6给所有单元格——容易显得“框感”太重，违背简洁初衷
响应式窄屏下 padding 和 font-size 要一起调
小屏幕里，固定 padding: 8px 12px 可能让文字挤在角落，甚至换行。这时候不能只缩 font-size，否则文字和边框贴太近，失去呼吸感。
推荐组合调整：
- 媒体查询内把
th, td的padding改为6px 8px - 同步把
font-size从14px降到13px或12px - 如果列数多，考虑加
white-space: nowrap防止意外折行，再配合overflow-x: auto在父容器上
最容易被忽略的一点：没有为 th 单独设置 text-align: left 或 center，导致表头文字默认居左而数据居中，视觉割裂——简洁的前提是统一节奏。
