border-collapse: collapse 是实现简洁表格的第一步，它使相邻单元格边框合并为一条线，消除默认的断开与双线效果，但需显式为 th、td 设置边框和 padding 才生效。
为什么 border-collapse: collapse 是简洁表格的第一步
浏览器默认用 border-collapse: separate，单元格之间有隐形间距，边框看起来断开、双线、错位——这不是你想要的“简洁”。设成 collapse 后，相邻边框真正合并为一条线，视觉上干净连贯。
但注意：border-spacing 在 collapse 模式下完全失效；table 上设了边框，th 和 td 不设边框，内部还是空白——因为合并后的边框必须显式定义在单元格上。
- 统一写
th, td { border: 1px solid #e9ecef; }，别只写table { border } - 避免混用
border-collapse: collapse和旧属性如cellspacing或border属性（HTML 中的），它们会冲突或被忽略 - 如果要保留一点呼吸感，靠
padding控制，不是靠边距“撑开”
padding 才是控制文字留白的核心，不是 border-spacing
很多人想“让单元格宽松点”，第一反应调 border-spacing，但它在 collapse 下无效。真正起作用的是 padding：它直接作用于内容区域，让文字离边框有距离，又不破坏线条连续性。
- 推荐起步值：
th, td { padding: 8px 12px; }，上下一致、左右稍宽，阅读舒适 - 表头可略加强：
th { padding: 10px 12px; font-weight: 600; } - 别给
table设padding——它不会透传到单元格，纯属浪费 - 移动端慎用过大
padding，配合table-layout: fixed防列宽失控
用细线 + 色彩替代全边框，视觉更轻量
全边框（四边都画线）容易让表格显得厚重。真正简洁的做法是只保留必要分隔线，靠颜色对比建立结构层次。
- 表头底边加粗：
th { border-bottom: 2px solid #495057; } - 数据行只留底边：
td { border-bottom: 1px solid #dee2e6; }，最后一行可额外清掉底边（用tr:last-child td { border-bottom: none; }） - 隔行背景色提升可读性：
tbody tr:nth-child(even) { background-color: #f8f9fa; } - 表头背景色建议浅灰：
th { background-color: #f8f9fa; }，和正文区分开
响应式处理：小屏别硬撑，优先保语义
在手机上强行显示宽表格，只会让用户左右滑动或缩放——这不是响应式，是妥协。真正简洁的响应式，是让结构可读、信息不丢失。
- 最简方案：给
table外层容器加overflow-x: auto，允许水平滚动 - 进阶方案：媒体查询中设
@media (max-width: 768px) { th, td { display: block; } }，再配合data-label和:before显示列名 - 务必保留
thead/tbody/th[scope]等语义标签——屏幕阅读器和 SEO 都依赖这个，不是装饰 - 别用
display: grid或div模拟表格来“绕开”响应问题，除非你明确放弃表格语义（比如纯布局场景）
简洁不是删减，是克制地选择每一条线、每一处留白、每一种颜色。最容易被忽略的是：边框合并后，所有样式必须落在 th 和 td 上，而不是只靠 table 一个声明撑全场。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
