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

`）内的子表格单独启用水平滚动功能，关键在于对容器元素设置 `max-width` 与 `overflow-x: auto`，避免父级表格布局干扰。

在实际开发中，常需在主表格（如数据概览表）的某一行中嵌入一个列数较多的子表格（如明细列表），此时若直接对子表格外层

设置 overflow-x: auto，往往无法生效——根本原因在于：表格单元格（）默认具有 white-space: normal 和自适应宽度行为，会强制撑开容器，导致滚动失效。

正确做法是：为承载子表格的 元素显式限定最大宽度，并启用横向溢出滚动。仅设置 overflow-x: auto 不足，必须配合 max-width（或固定 width）才能触发浏览器的滚动机制。

✅ 推荐实现方式（CSS 类封装，更易维护）：

.nested-table-container {
  max-width: 600px;        /* 关键：限制容器最大宽度 */
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0;              /* 可选：消除内边距干扰 */
}
.nested-table-container table {
  min-width: 100%;         /* 确保子表格内容不被过度压缩 */
  border-collapse: collapse;
}

对应 HTML 结构（精简优化版）：

<style>
  table, th, td { border: 1px solid #333; border-collapse: collapse; }
  th, td { padding: 6px 10px; }
</style>

<div style="overflow-x: auto;">
  <table>
    <!-- 其他常规行 -->
    <tr>
      <th>Inside Table</th>
      <td class="nested-table-container">
        <table>
          <thead>
            <tr>
              <th>Header1</th><th>Header2</th><th>Header3</th>
              <!-- ... 更多表头（共20列） -->
              <th>Header20</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>Data1</td><td>Data2</td><td>Data3</td>
              <!-- ... 对应20列数据 -->
              <td>Data20</td>
            </tr>
          </tbody>
        </table>
      </td>
    </tr>
  </table>
</div>

⚠️ 注意事项：

• 不要仅依赖 overflow-x: auto：若容器无宽度约束（如 默认无 max-width），滚动将不会触发；
• 避免在 上直接设 overflow： 是替换元素，overflow 在部分浏览器中无效，务必作用于其父级块级容器（如
  或

  ）； 响应式建议：可结合媒体查询动态调整 max-width，例如在小屏下设为 100vw 并预留滚动区； 可访问性提示：为滚动容器添加 aria-label="Scrollable nested table" 提升无障碍体验。 总结：为子表格启用水平滚动，本质是「控制容器尺寸 + 显式声明溢出行为」。通过精准设置 max-width + overflow-x: auto 于承载

  （或其内部 ），即可稳定、跨浏览器地实现嵌套表格的横向滚动，无需 JavaScript，语义清晰且性能优异。