嵌套二级表格必须写在或内，因浏览器强制校验只能直接包含或，否则子表格会被移出或错位；正确做法是将完整二级表格html嵌入单元格内容中，并用colspan/rowspan控制空间，避免多层嵌套。
嵌套二级表格必须写在 <td> 或 <code><th> 里
<p>浏览器对 <code><table> 的 DOM 结构有硬性校验：<code><tr> 只能直接包含 <code><td> 或 <code><th>，不能放 <code><table>。如果你把子表格直接写在 <code><tr> 里，浏览器会自动把它“踢”到外层 <code><table> 外面，或塞进隐式 <code><tbody>，结果就是：子表格飘到主表上方/下方、<code>document.querySelector('.nested') 找不到、CSS 选不到 tr > table。
正确做法只有一条路径：把整个二级表格的 HTML（从 <table> 到 <code>
）完整贴进某个 <td> 或 <code><th> 的内容区域。
<ul>
<li>别试图用 <code><tr><table>...</table></tr> —— 这是无效结构
<tr> 和 <code><td> 包裹，哪怕只有一行一列
<li>如果想让二级表格横跨多列，先用 <code>colspan 合并单元格，再往里塞
<colspan></colspan> 和 <rowspan></rowspan> 是控制嵌套视觉空间的关键
二级表格本身没有“宽度继承”，它默认按内容撑开。如果父单元格太窄，子表格会溢出或换行错乱；如果想让它填满可用区域，得靠父级单元格预留空间。
例如：主表某行需要展示一个 3 列明细表，但父单元格只占 1 列，直接塞进去就会挤压变形。这时应该：
- 给该
<td> 加 <code>colspan="3"，先横向合并出足够宽度 - 子表格内部用
<th> 定义 3 列表头，宽度由 CSS 控制（如 <code>width: 33.3%） - 避免依赖
width="100%"——老式属性在现代浏览器中行为不一致，优先用 CSS - 屏幕阅读器无法线性读取嵌套结构，无障碍支持极差
- 响应式断点难适配，小屏下横向滚动不可避免
嵌套超过两层极易失控，建议用 CSS Grid 替代
三级嵌套（<table> > <td> > <table> > <td> > <table>）不是语法错误，但实际中几乎必然出问题：
<ul>
<li>打印时层级错位、缩放后单元格重叠</li>JS 操作 <code>querySelectorAll('table table table') 返回节点顺序不可靠
真正需要“单列下多列”或“区域嵌套布局”时，display: grid 更可控：父容器设 grid-template-columns: 1fr 2fr，子区域用 grid-column: span 2 即可实现视觉嵌套效果，且语义清晰、无 DOM 层级污染。
邮件模板是唯一还值得用嵌套表格的场景
Outlook、Apple Mail 等客户端对 CSS 支持极弱，flex 或 grid 基本失效，此时嵌套表格仍是兼容性兜底方案。
但要注意：
- 所有样式必须内联（
style="border: 1px solid #ccc;"），外部 CSS 或<style></style>标签会被忽略 - 避免
<thead>/</thead> <tbody> —— 部分客户端会丢弃这些标签 <li>宽度统一用像素值（如 <code>width="600"），百分比在 Outlook 中计算异常
嵌套本身没问题，但每多一层，就多一分被客户端解析失败的风险。能两层解决，绝不三层。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
