如何为主表格某一行内的子表格添加水平滚动条

• 问题本质：主表格的单元格（td）会自动拉伸以适配内部内容宽度，导致包裹子表格的div没有触发滚动条的空间限制，因此overflow属性无法生效。
• 解决方案：给包裹子表格的div设置最大宽度（max-width），或限制对应td的宽度，当子表格宽度超过限制时，水平滚动条就会自动启用。

修改后的完整代码示例：

<style> 
table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
} 
th, td {
    padding: 5px;
}
/* 可选：限制主表格单元格的最大宽度，避免整体布局过度拉伸 */
.main-table td {
    max-width: 500px;
}
</style>
<div style="overflow-x: auto;overflow-y:hidden;">
<table class="main-table">
  <tr>
    <th>Old_records</th>
    <td> 32 </td>
  </tr>
  <tr>
    <th>Records_fetched</th>
    <td>100</td>
  </tr>
  <tr>
    <th>NEw_records</th>
    <td>80</td>
  </tr>
  <tr>
    <th><p><b>Inside Table</b></p></th>
    <td>
        <!-- 核心修改：给子表格的外层div添加max-width触发滚动 -->
        <div style="overflow-x: auto; overflow-y:hidden; max-width: 600px;">
        <table>
        <thead>
          <tr>
            <th>Header1</th>
            <th>Header2</th>
            <th>Header3</th>
            <th>Header4</th>
            <th>Header5</th>
            <th>Header6</th>
            <th>Header7</th>
            <th>Header8</th>
            <th>Header9</th>
            <th>Header10</th>
            <th>Header11</th>
            <th>Header12</th>
            <th>Header13</th>
            <th>Header14</th>
            <th>Header15</th>
            <th>Header16</th>
            <th>Header17</th>
            <th>Header18</th>
            <th>Header19</th>
            <th>Header20</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Data1</td>
            <td>Data2</td>
            <td>Data3</td>
            <td>Data4</td>
            <td>Data5</td>
            <td>Data6</td>
            <td>Data7</td>
            <td>Data8</td>
            <td>Data9</td>
            <td>Data10</td>
            <td>Data11</td>
            <td>Data12</td>
            <td>Data13</td>
            <td>Data14</td>
            <td>Data15</td>
            <td>Data16</td>
            <td>Data17</td>
            <td>Data18</td>
            <td>Data19</td>
            <td>Data20</td>
          </tr>
        </tbody>
        </table>
        </div>
    </td>
  </tr>
  <tr>
    <th>Old_records</th>
    <td> 32 </td>
  </tr>
  <tr>
    <th>Old_records</th>
    <td> 32 </td>
  </tr>
  <tr>
    <th>Old_records</th>
    <td> 32 </td>
  </tr>
  <tr>
    <th>Old_records</th>
    <td> 32 </td>
  </tr>
  <tr>
    <th>Old_records</th>
    <td> 32 </td>
  </tr>
</table>
</div>

关键调整说明： #

1. 给包裹子表格的div添加max-width: 600px;（数值可根据实际布局需求调整），当子表格宽度超过该值时，水平滚动条自动激活。
2. 可选：为主表格的td设置max-width，避免主表格单元格因内嵌宽表过度拉伸，保持整体布局的紧凑性。

通过以上修改，内嵌子表格将拥有独立的水平滚动功能，同时不影响主表格的原有滚动效果。

内容的提问来源于stack exchange，提问作者Chandra Sekhar K