简约表格的关键是禁用默认边框分离行为，显式设置 border-collapse: collapse，并统一控制 table、th、td 的边框；字体、间距、行高需克制，padding 推荐 8px 12px，line-height 设为 1.4–1.5；隔行色与悬停色应低饱和高明度；响应式采用 overflow-x: auto；html 结构须语义干净。
直接用 CSS 控制边框、间距和配色，不依赖 border 属性或旧式内联样式，就能做出真正干净的简约表格——关键不是“加什么”，而是“去掉什么”。
必须禁用默认边框分离行为
浏览器给 table 默认的 border-collapse: separate，导致单元格之间有空隙、边框双线、对齐发虚。这是简约风格最大的视觉干扰源。
- 务必在 CSS 中显式写
border-collapse: collapse，不能省略 - 不要只给
td加border，否则上下左右四边都画一遍，视觉上变粗；应统一控制在table, th, td上 - 避免混用
border和旧式<table border="1">，后者会覆盖 CSS，且语义错误 <h3>字体、间距与行高要克制</h3> <p>简约 ≠ 空洞，而是减少冗余视觉元素。字号太小看不清，padding 太大显得松散，line-height 不设会导致文字贴边。</p><div class="aritcle_card flexRow artxards"> <div class="artcardd flexRow"> <a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher"><img src="https://img.php.cn/upload/skill/000/000/081/179109368394970.jpg" alt="Wechat HTML Publisher" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a> <div class="aritcle_card_info flexColumn"> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="overflowclass">Wechat HTML Publisher</a> <p class="overflowclass">直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。</p> </div> <a rel="nofollow" href="/xiazai/skill6712" title="Wechat HTML Publisher" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> <ul> <li> <code>font-family优先选系统无衬线字体，如system-ui, -apple-system, sans-serif -
padding推荐8px 12px（横向稍宽利于阅读），th可比td多 2px 垂直留白 -
line-height设为1.4或1.5，避免文字挤在一起 - 禁用
font-weight: bold在td上——th自带语义加粗，td加粗反而破坏层级
隔行变色与悬停反馈要轻量
偶数行背景色和 hover 效果是提升可读性的有效手段，但颜色必须低饱和、高明度，否则破坏简约感。
-
tr:nth-child(even)背景色推荐#f9f9f9或#fbfbfb，别用#f2f2f2（太灰，易显脏） -
tr:hover只改背景色，别加阴影、边框或 transform，颜色用#f5f5f5即可 - 如果表格列数少（≤4）、数据密度高，可完全去掉隔行色，靠留白和字体粗细区分层次
响应式收窄时保留数据可读性
小屏下表格容易横向溢出，强行缩放字体或隐藏列会丢失信息。真正的简约方案是让结构适应设备，而非牺牲内容。
- 用
overflow-x: auto包裹table，确保水平滚动可用（用户能手动拖动） - 避免在移动端用
display: block+data-label伪元素重构——它增加 DOM 复杂度，且屏幕阅读器支持不稳定 - 若必须卡片化，仅对纯展示型表格（非数据录入/筛选场景）启用，且保留原
thead的语义结构 -
min-width设为实际列宽总和（如min-width: 600px），防止容器过窄导致文字折行压垮行高
最易被忽略的是：简约风格的成败不在最后一行 CSS，而在第一行 HTML 结构是否干净——th 是否只用于真正表头，colgroup 是否被用来统一列宽而不用内联 width，以及有没有多余的 或空 td 混在数据里。这些细节一旦存在，再好的 CSS 也救不回视觉重量。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
