嵌套表格必须将子<table>置于<td>内而非外部，需统一设置border-collapse: collapse，避免变量名冲突和深层嵌套，优先用语义化列表替代非数据场景。
嵌套表格必须用 <table> 放在 <td> 里，不能放外面
常见错误是把子表格写在父 <tr> 或 <tbody> 外面，比如：
<table> <tr><td>一级分类</td></tr> </table> <table> <!-- ❌ 这个子表格脱离了父 td，浏览器会自动闭合前一个 table，结构全乱 --> <tr><td>二级分类</td></tr> </table>
正确做法是子 <table> 必须作为某个 <td> 的直接子内容，例如：
<table class="outer">
<tr>
<td>电子产品</td>
<td>
<table class="inner">
<tr><td>手机</td></tr>
<tr><td>平板</td></tr>
</table>
</td>
</tr>
</table>- 嵌套层级越深，
<td>的colspan/rowspan越容易算错，建议只在必要时合并 - 不要用
<div>包裹子表格再塞进<td>—— 某些旧浏览器（如 IE8）会破坏表格语义 -
frame="void"是老式写法，现代项目建议用 CSS 控制边框和空白，更可控
border-collapse: collapse 必须统一设置，否则嵌套后边框错位
外层表格设了 border-collapse: collapse，但内层没设，会导致内层表格自带默认间距，视觉上出现“双线”或“空隙”。尤其在多级嵌套时，这种错位会逐层放大。
推荐做法是全局重置：
立即学习“前端免费学习笔记（深入）”；
table {
border-collapse: collapse;
margin: 0;
padding: 0;
}
table.outer { width: 100%; }
table.inner { width: 100%; }- 内层表格用
width: 100%而不是固定像素，避免宽度撑破父<td> - 如果内层需要独立边框样式（比如虚线），应在
table.inner td上单独设border，而非依赖border-collapse - 移动端下，嵌套表格容易横向溢出，务必加
overflow-x: auto到最外层容器
PHP 动态生成嵌套表格时，foreach 嵌套变量名必须隔离
常见崩溃点：内层 foreach 用和外层一样的变量名（如都叫 $row），导致外层数据被覆盖，子分类全部挂到同一个父分类下。
正确写法示例（Laravel Blade）：
@foreach($categories as $cat)
<tr>
<td>{{ $cat->name }}</td>
<td>
@if($cat->children->count())
<table class="inner">
@foreach($cat->children as $subcat) <!-- ✅ 变量名不重叠 -->
<tr><td>{{ $subcat->name }}</td></tr>
@endforeach
</table>
@endif
</td>
</tr>
@endforeach- 数据库查询必须提前完成父子关联（如 Eloquent 的
with('children')），别在模板里查库 - 避免在循环中调用
count()或isEmpty()多次——先存成布尔变量，减少重复计算 - 如果层级超过 3 级（比如分类 → 子类 → 品牌 → 型号），表格嵌套会迅速变得难维护，此时应考虑改用
<details><summary>或树形组件
可访问性与语义陷阱：嵌套表格 ≠ 语义化层级
屏幕阅读器会把每个 <table> 当作独立数据表朗读，不会自动识别“这是分类树的第二层”。用户听到的是“表格，2 行 1 列”，而不是“手机，子分类”。
这意味着：
- 纯靠嵌套表格实现多级分类，对视障用户基本不可用
- SEO 不会把嵌套表格当层级结构索引，标题权重、关键词密度都难控制
- 如果只是展示结构（非数据报表），优先用语义化列表：
<ol>+<ul>嵌套，配合 ARIA 属性（如aria-level） - 真要保留表格布局，至少给每层加
role="treeitem"和aria-expanded，并用 JS 控制展开逻辑
嵌套表格真正适合的场景，其实是「带行列关系的多级汇总数据」，比如：某学院各专业 → 各班级 → 各学生 → 各科成绩。一旦脱离二维数据本质，就该换方案了。
