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