嵌套表格撑破父容器的根本原因是父td默认按内容伸缩且不响应子表尺寸声明；必须显式设置父td的width或max-width，并配合div包裹、table-layout:fixed、img/max-width等综合措施才能约束宽度。

为什么嵌套表格会撑破父容器？

嵌套表格宽度失控，根本不是子表写没写 width，而是父 td 默认按内容伸缩，且不响应子表的尺寸声明。浏览器把子表当“不可压缩内容”处理，哪怕你给子表写了 width: 100%，只要父 td 没设约束，它就无限扩张。

常见现象包括：外层表格横向滚动、右侧内容被挤到下一行、overflow-x: auto 包裹失效。

• 父 td 必须显式设 width 或 max-width（百分比或固定值均可）
• 子表不能依赖 width: 100% 自动适配——它只认父 td 的计算后宽度，而这个宽度在 table-layout: auto 下是动态的
• 如果父表用了 border-collapse: collapse，子表也会继承，可能让边框叠加变粗，进一步加剧视觉溢出

如何让嵌套表格真正“缩进”父单元格？

关键不是调子表，而是锁死父 td 的渲染行为。子表再听话，父容器不设限也白搭。

使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件

如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Andr​​oid友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Andr​​oid应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更

下载

• 给父 td 加 width: 200px（或 max-width: 200px）+ overflow: hidden（注意：这本身对 td 无效，但能触发其内部块级上下文）
• 在父 td 内套一层 <div style="width: 100%; overflow: hidden">，再把子表放进去——<code>overflow: hidden 只对块级元素生效
• 子表自身加 table-layout: fixed + width: 100%，并确保第一行 th 或 col 有明确 width（否则 fixed 不起作用）
• 避免在子表里用 white-space: nowrap，否则长文本直接撑开整列；改用 word-break: break-word 或 overflow-wrap: break-word

嵌套表格里图片/代码块导致溢出怎么办？

img、pre、code 这类替换元素默认无视 td 宽度，它们有自己的固有尺寸逻辑。

• 所有嵌套表格内的 img 必须统一加 max-width: 100% + height: auto
• pre 和 code 要加 white-space: pre-wrap + overflow-x: auto（不能只靠 word-break）
• 如果子表里还有内嵌 div，检查它是否设置了 display: inline 或 float——这些会让它脱离块级流，绕过父 td 的宽度限制

移动端嵌套表格为何更难控制？

小屏下，嵌套结构放大了所有宽度计算误差。父 td 的百分比宽度在 viewport 缩小时可能被四舍五入成 0px，子表直接“掉出边界”。

• 别在嵌套表格里用 colspan 或 rowspan，它们在小屏下极易错位
• 外层容器必须加 overflow-x: auto，但仅限桌面端备用；移动端优先考虑降级为卡片堆叠（display: block + margin-bottom）
• 嵌套层级超过两层（比如 td > table > tr > td > table）时，CSS 选择器权重和继承链会变得不可预测，建议用 class 显式隔离样式作用域，例如 .nested-table 和 .nested-table-inner

嵌套表格的宽度问题从来不是单点故障，而是布局模型、继承规则、元素类型三者交织的结果。最容易被忽略的是：你调了半天子表样式，却没碰父 td 的 display 行为和尺寸上下文——它才是真正的闸门。