如何为嵌套在主表格行内的子表格添加水平滚动条

本文详解如何在 html 表格中为嵌套于某一行单元格（`

`）内的子表格实现独立的水平滚动功能，关键在于为包裹子表格的容器设置固定宽度限制与 `overflow-x: auto`，避免父级表格布局干扰。

在复杂数据展示场景中，常需在主表格的某一单元格内嵌入一个列数较多的子表格（如明细列表、历史记录等）。此时若直接对子表格应用 overflow-x: auto 通常无效——因为

默认具有 width: auto 且会随内容撑开，导致滚动容器失去约束边界，水平滚动条无法触发。

核心原理：水平滚动生效的前提是容器存在明确的宽度上限（如 max-width 或 width）且内容总宽度超出该限制。因此，不能仅依赖 overflow-x: auto，必须配合尺寸约束。

✅ 正确做法是：

• 为承载子表格的 （或其内部
  ）显式设置 max-width（推荐）或 width；

• 同时启用 overflow-x: auto（或 overflow: auto），并确保 white-space: nowrap 不被意外覆盖（但本例中表格单元格默认不换行，通常无需额外设置）；
• 避免父级
  的 table-layout: auto 导致子容器宽度计算异常（默认行为一般可接受）。

  以下为优化后的完整示例（已验证可用）：

  Old_records	32
  Records_fetched	100
  New_records	80
  Inside Table	Header1 Header2 Header3 Header4 Header5 Header6 Header7 Header8 Header9 Header10 Header11 Header12 Header13 Header14 Header15 Header16 Header17 Header18 Header19 Header20 Data1 Data2 Data3 Data4 Data5 Data6 Data7 Data8 Data9 Data10 Data11 Data12 Data13 Data14 Data15 Data16 Data17 Data18 Data19 Data20