精美排版关键在结构合法、样式隔离与语义克制；border-collapse: collapse仅解决边框合并，须配合th/td显式border、子表单独设separate，并注意padding与对齐陷阱。
直接用 table 标签加默认样式，基本没法看——边框双线、文字挤成一团、列宽失控、响应式全崩。真正能“精美排版”的关键不在标签嵌套多深，而在结构合法 + 样式隔离 + 语义克制。
为什么 border-collapse: collapse 是起点，不是终点
多数人设了这个就以为边框搞定了，结果发现子表边框消失、打印时错位、移动端列被撑爆。它只解决相邻单元格边框合并问题，但不处理继承污染和布局冲突。
- 必须配合
border显式写在th和td上，不能只写在table上（否则边框只出现在外框） - 若父表用了
border-collapse: collapse，子表必须单独声明border-collapse: separate，否则边框会塌陷或加倍 -
border-collapse: collapse会让padding表现不稳定，尤其在table-layout: fixed下，建议统一用padding: 8px 12px并测试各浏览器渲染差异
text-align 和 vertical-align 的组合陷阱
左对齐文本、右对齐数字、居中表头看似简单，但一混用就出问题：比如 th 设了 text-align: center，里面放了个 input，结果输入框文字还是左对齐——因为表单控件有自己的默认对齐逻辑。
- 数字列优先用
td:nth-child(3) { text-align: right; }，避免靠类名维护（易漏） -
vertical-align: middle对图片/图标有效，但对多行文本会偏高，改用display: flex; align-items: center;更可控（需包裹一层div） - 不要给整个
table设vertical-align，它只对行内元素生效，对表格单元格无效
响应式表格的三种真实可行方案
所谓“宽度自适应”，90% 场景下其实是列内容溢出或换行失控。硬设 width: 100% + overflow-x: auto 只是兜底，不是排版。
- 方案一（推荐）：用
min-width控制关键列，其余列用width: 0; min-width: 120px;触发弹性收缩（比table-layout: fixed更自然） - 方案二（窄屏专用）：包裹
<div style="overflow-x: auto"><table>...</table></div>，但必须移除table的width: 100%，否则内部列宽计算失效 - 方案三（数据降维）：小屏下用
@media (max-width: 768px)把每行转成卡片流，display: block+::before伪元素生成字段标签，比隐藏列更可访问
嵌套表格的致命误区与替代路径
真要嵌套，不是“能不能”，而是“值不值得”。绝大多数需求本质是“展开/收起”或“分组展示”，而非结构化多维数据。
- 错误操作：
<tr><table></table></tr>—— 浏览器会把它踢出 DOM，document.querySelector查不到，CSS 完全不生效 - 正确写法仅一种：
<td><table class="child-table">...</table></td>，且子表必须含完整<thead></thead> <tbody> <li>更优解：<code><details><summary>明细</summary><table>...</table></details>—— 无需 JS、无障碍友好、打印自动折叠、样式完全隔离
最常被忽略的点：子表字体大小默认继承父表，一行里嵌个 0.8em 的子表，再嵌一层就变成 0.64em，肉眼难读。所有嵌套层级都得显式重置 font-size，不能靠继承。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
