原生默认样式丑因无边框合并、单元格间距大、文字贴边、表头数据无区分；须设border-collapse:collapse、统一padding和vertical-align，th/td样式需分离，辅以斑马纹、悬停、响应式处理。
为什么直接写 <table> 会显得丑？
<p>原生 <code><table> 没有默认边框合并、单元格间距松散、文字挤在角落、表头和数据无视觉区分——浏览器只是按规范渲染结构，不负责“好看”。<code>border-collapse: collapse 是第一个必须加的声明，否则会出现双线边框；padding 不设，文字就贴着边框；vertical-align: middle 不统一，多行文本或图片会高低错乱。
th 和 td 的样式不能混着写
th 和 td 的样式不能混着写表头和数据单元格语义不同，样式也该分开控制。常见错误是只给 td 加 padding，结果 th 文字顶到边框；或者用 text-align: center 一刀切，导致数字列右对齐失效。
-
th推荐：背景色 +font-weight: bold+text-align: center -
td按内容类型分：数字列加class="num"并设text-align: right；长文本列可加white-space: normal防溢出 - 务必同时设置
th, td { vertical-align: middle; padding: 8px 12px; }，避免垂直错位
斑马纹和悬停不是“锦上添花”，而是阅读刚需
超过 5 行的表格，人眼容易跳行。单纯靠颜色区分不够，得靠节奏感。用 tr:nth-child(even) 加浅灰背景是最小成本方案；tr:hover 则解决“我正看哪一行”的实时定位问题。
- 别用纯黑/白对比，推荐
rgba(240, 240, 240, 0.7)这类带透明度的色值，避免视觉疲劳 - 如果表格有固定表头（
<thead>），记得把 <code>tr:hover写在<tbody> 内部选择器里，否则悬停会覆盖表头 <li>慎用垂直斑马纹（<code>td:nth-child(even)），列多时易造成视觉干扰，仅在列数 ≤ 4 且需强调列关系时考虑 - 用
<div style="overflow-x: auto"><table>...</table></div>包裹，比直接设table { width: 100vw }更可靠 - 若需列堆叠（如手机端每行只显示 1 列），必须提前给每列
<th> 或 <code><td> 加 <code>data-label属性，例如<td data-label="姓名">张三</td>，再用 CSS 的display: block+attr(data-label)生成标签 - 不要在
<table> 上直接写 <code>width: 100%后又用min-width强撑，这会导致小屏强制横向滚动却无法滑动——应改用table-layout: fixed配合th的width百分比控制 实际项目里，最常卡住的不是“怎么加样式”，而是结构没分清<thead>/<code><tbody> 就硬套 CSS，或者把 <code>colspan当布局工具滥用。样式能补救的只有视觉，逻辑混乱的表格，再好看的 CSS 也救不回可维护性。
响应式表格最容易被忽略的三个细节
小屏下表格不是“缩放”就能解决的。横向滚动、列堆叠、隐藏非关键列，这三种策略对应不同场景，但都依赖结构干净。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
