必须设置 border-collapse: collapse 于 table 元素，否则相邻单元格边框叠加形成双线；需显式包裹 tbody 实现斑马纹与 hover；响应式需外层容器设 overflow-x: auto 并配 min-width。
border-collapse: collapse 必须加，否则双线边框难看
浏览器默认给 table、td、th 各自渲染边框，相邻单元格之间会形成“双线”效果，视觉上粗重又不统一。不加 border-collapse: collapse，哪怕只写 border: 1px solid #ddd，也会看到两倍粗的竖线和横线。
常见错误现象：表格看起来像被“压扁”或“挤在一起”，尤其在小字号下边框糊成一片。
- 必须在
table上设置border-collapse: collapse，不能只设在td或th - 如果用了
cellspacing="0"属性，它只影响 HTML 层面间距，对 CSS 边框合并无效 —— 还得靠 CSS - 一旦启用
collapse，border就只画一次，后续所有边框控制（比如表头加粗、右侧无边框）才真正可控
padding 和 text-align 要分元素设置，别偷懒全写 table
很多人把 padding 和 text-align 直接挂到 table 上，结果表头文字贴左、数据右对齐失效，数字列也歪了。
正确做法是按语义拆开：表头通常需要居中+稍大内边距，数据单元格则按内容类型对齐（文本左对齐、数字右对齐、金额居中）。
-
th推荐padding: 12px 16px+text-align: center+font-weight: 600 -
td用padding: 8px 12px，再按列加类区分对齐，例如class="text-right"对应text-align: right - 避免用
td:nth-child(2)这类位置选择器控制对齐——列顺序一变就错，语义类更可靠
斑马纹用 tbody tr:nth-child(even)，不是 table tr
直接写 table tr:nth-child(even) 会导致 thead 里的第一行也被算进去，表头跟着变色，破坏视觉层级。
真正起作用的是 tbody 内部的行。如果你没显式写 tbody，浏览器会自动包裹，但显式写出更稳妥、更易维护。
- 必须限定在
tbody tr上，例如：tbody tr:nth-child(even) { background-color: #f9f9f9; } - hover 效果同理，写
tbody tr:hover，否则鼠标移上去时表头背景也会闪动 - 如果表格有
tfoot，它不属于tbody，不会被斑马纹影响，这是合理的设计
响应式横向滚动要包容器，别只设 overflow-x
只给 table 加 overflow-x: auto 没用 —— 表格本身不会收缩，滚动条出不来，内容直接溢出页面。
关键在于用一个带 overflow-x: auto 的外层容器包裹 table，并确保该容器有明确宽度限制（比如 width: 100% 或最大宽度）。
- HTML 结构必须是：
<div class="table-container"><table>...</table></div> - CSS 中
.table-container设overflow-x: auto，table设min-width: max-content或固定宽度（如width: 1200px） - 移动端若需堆叠布局，得配合媒体查询改写结构，仅靠 overflow 不足以适配窄屏阅读
tbody 的显式包裹和 min-width 配合 overflow-x 的组合。这两个点不处理好，再好看的配色和 hover 效果，在真实数据长度变化时都会立刻露馅。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
