嵌套表格必须放在<td>或<th>内，否则浏览器会将其移出<tr>导致结构错乱；需用不同class区分父子表，子表设width:100%，父容器加overflow-x:auto实现滚动，table-layout:fixed配合width和col设置防撑开。
嵌套表格为什么总被撑开
根本原因是浏览器对 <tr> 的 DOM 结构有硬性限制：它只接受 <th> 或 <td> 作为直接子元素。如果你把子表格直接写在 <tr> 里（比如 <tr><table>...</table></tr>），浏览器会自动把它“踢”到 <table> 外面，导致结构错乱、样式失效、JS 查不到节点。
嵌套必须落在 <td> 或 <th> 内部
合法且稳定的唯一方式，是把整个子表格完整写进某个单元格的内容位置：
- 子表格不能用
<div>包裹——这反而可能触发浏览器纠错逻辑 - 建议显式写出
<tbody>，哪怕只有一组<tr>，避免隐式插入带来的不确定性 - 父表和子表必须用不同 class 区分，比如
class="main-table"和class="detail-table" - 子表格设
width: 100%即可撑满父单元格，无需额外 JS
overflow 控制的是容器，不是表格本身
很多人误以为给 <table> 加 overflow: auto 就能滚动，但这是无效的——<table> 元素默认不支持 overflow，浏览器会忽略它。真正起作用的是包裹它的外部容器：
- 把主表格包在
<div style="overflow-x: auto;">里，才能出现横向滚动条 - 如果子表格内容超宽，也要单独给它的父
<td>设max-width+overflow: hidden，否则仍会撑开整列 -
overflow: hidden在<td>上生效，但会裁剪内容；overflow: auto则需配合固定高度才出滚动条
table-layout: fixed 是防撑开的关键开关
仅靠 overflow 不够，必须配合布局控制。启用 table-layout: fixed 后，浏览器不再根据内容宽度计算列宽，而是按你设定的规则来：
立即学习“前端免费学习笔记（深入）”；
- 必须给表格设明确宽度，如
width: 100%或具体像素值 - 列宽优先从
<col>的width属性读取；没有时看第一行<th>/<td>的width - 搭配
word-break: break-all或white-space: normal，防止长文本/URL 撑开单元格 - 图片要加
max-width: 100%; height: auto;，否则仍会突破约束
最易被忽略的一点：嵌套表格的 table-layout 默认继承父表，但父表用了 fixed，子表若没重置，可能列宽错位或文字挤成一团——务必单独为子表类名设置 table-layout: auto 或明确的 fixed 规则。
