嵌套表格只能放在或内，因只允许子元素为或，否则浏览器会自动修正结构导致错乱；正确做法是将子表格完整写入单元格内部，并通过类名隔离样式。
嵌套表格只能在 <td> 或 <code><th> 里放另一个 <code><table>，其他位置放都会被浏览器自动修正、结构错乱甚至丢失内容。<h3>为什么 <code><tr> 里不能直接写 <code><table><p>浏览器对 <code><table> 的 DOM 结构有硬性要求：<code><tr> 只能是 <code><table>、<code><tbody>、<code><thead> 或 <code><tfoot> 的直接子元素；它下面也只允许出现 <code><th> 或 <code><td>。一旦你在 <code><tr> 里塞 <code><table>，浏览器会把它“踢”到 <code><table> 外面，或者塞进隐式生成的 <code><tbody>，导致 JS 拿不到节点、CSS 选不到目标、打印样式异常。<p>常见错误现象：</p>
<ul>
<li>嵌套表格显示在主表上方或下方，而不是预期单元格内</li>
<li>
<code>document.querySelector('table.nested') 返回 null
tr > table 写 CSS 完全不生效正确嵌套写法：必须落在
<td> 或 <code><th> 内部<p>合法结构只有一个入口：把整个子表格写在某个单元格的内容位置。你可以用 <code>colspan 或 rowspan 先合并出足够空间，再往里塞子表格，视觉上更稳。
示例（精简可运行）：
| 部门 | 人员详情 | ||||
|---|---|---|---|---|---|
| 技术部 |
|
要点：
- 子表格无需额外包裹
<div> —— 那反而可能触发纠错<li>建议显式写出 <code><tbody>，哪怕只有一组 <code><tr>，避免浏览器隐式插入带来的不确定性<li>如果子表格要撑满父单元格宽度，CSS 中设 <code>width: 100%即可，不用改 HTML - 给父表和子表分别加类名，比如
class="main-table"和class="detail-table" - 用类选择器单独控制子表尺寸：
table.detail-table { width: 100%; max-width: 400px; } - 重置子表单元格的 padding 和 border，别依赖继承：
table.detail-table td { padding: 4px 6px; border: 1px solid #ccc; } - 禁用子表的
border-collapse继承（设为separate），避免与父表边框合并逻辑打架 - 订单行中嵌套该订单的明细项列表（每项含 SKU、数量、单价）
- 员工信息行中嵌套其最近三次绩效评分记录
- 课程表某格中嵌套该时段的多个并行活动安排
样式冲突和尺寸失控怎么防
嵌套表格默认会继承父表格的 border-collapse、字体、边距等，容易让子表格边框变粗、文字变小、列宽错位。关键不是“怎么让它好看”，而是“怎么让它不被意外影响”。
实操建议：
什么时候真该用嵌套表格？
嵌套表格不是布局技巧，而是语义表达手段。只有当「某单元格的内容本身就是一个独立的数据表格」时才适用，比如：
如果只是为了对齐表单控件、实现多列布局、或者假装“看起来像表格”，请用 CSS Grid 或 Flex；强行用嵌套表格只会让结构脆弱、维护成本高、屏幕阅读器难以理解。真正难的从来不是怎么写，而是判断该不该写。
