table边框合并必须用border-collapse: collapse，否则td/th边框会分离；需统一设置table、th、td边框样式，配合padding控制内距；表头th与数据行应分别设置背景色和对齐方式；响应式设计推荐外层div+overflow-x:auto而非width:100%。
table 边框合并必须用 border-collapse: collapse
不加这句，table 和 td/th 的边框会默认分开，出现双线、间隙或错位，尤其在 IE 或旧版 Safari 中更明显。只设 border: 1px solid #ccc 不够，必须配合 border-collapse: collapse 才能真正“合为一条线”。
常见错误：只给 td 加边框，忘了给 table 或 th 设相同样式，导致表头无边框或粗细不一。
-
table上必须声明border-collapse: collapse，不能只写在td里 - 若需保留内边距又不想撑开边框，用
padding而非cellspacing（HTML 属性已过时） - 避免混用
border-collapse: separate和border-spacing，除非你真需要栅格化分隔效果
表头 th 和奇偶行背景色要分开控制
th 默认加粗居中，但视觉上容易和数据行脱节。直接给 th 加背景色（比如 #4f6b72）+ 白字是稳妥做法；而数据行用 tr:nth-child(even) 和 tr:hover 区分，比手动加 class="alt" 更可靠。
注意：如果表格有 <thead>，优先对 <code>thead th 单独设样式，避免被 tr:nth-child() 规则意外覆盖。
-
th建议统一设text-align: left，避免默认居中与左对齐数据列冲突 -
tr:hover在移动端无效，需搭配@media (hover: hover)条件判断 - 不要用
background: #fff no-repeat这类冗余写法——no-repeat对纯色无意义
响应式表格别硬塞 width: 100%
直接给 table 设 width: 100% 在小屏上常导致横向滚动困难或文字挤成一团。更实际的做法是：用外层 div 包一层并设 overflow-x: auto，再让 table 自身保持 min-width 或固定列宽。
如果列数少（≤4），可考虑用 table-layout: fixed + 显式设置 th 宽度，防止内容撑开列宽破坏对齐。
- 避免在
td里用white-space: nowrap，它会让长文本溢出且不可读 - 移动端慎用
font-size: 11px，iOS Safari 会强制放大，建议用rem或clamp() -
colgroup+col是控制列宽最语义化的方式，但兼容性没问题，放心用
语义结构影响样式可维护性
没用 <thead>、<code><tbody> 的表格，后期想单独给表头加阴影或固定表头时，几乎只能靠 JS 操作 DOM 或硬加 class。而有了明确结构，CSS 就能精准命中：<code>thead th、tbody td、tfoot td 各自独立控制。
另外，<caption></caption> 不只是摆设——它提供可访问性支持（屏幕阅读器会读出），同时也能用 CSS 定位到表格上方居中显示标题。
-
caption默认居中，加caption-side: bottom可移到下方 - 用
scope="col"或scope="row"标注th，提升表格语义和辅助技术兼容性 - 别忽略
vertical-align: middle—— 表格单元格默认是baseline，多行文本或图标容易上下错位
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
