小屏幕下表格横向滚动，页面其余区域不滚动的实现求助

需求：大屏幕下表格正常显示，当屏幕宽度小于$minTableWidth时，仅表格区域可横向滚动，页面其他部分保持移动端自适应。现有代码未实现预期效果，求调整方案。

现有HTML结构 #

<div>
  <div>other parts of the page, etc...</div>
  <div className={styles.tableWrapperOuter}>
    <div className={styles.tableWrapperInner}>
      <Table className={styles.applicationTable}>
        {renderTableHeader()}
        <TableBody>{renderTableContent()}</TableBody>
      </Table>
    </div>
  </div>
</div>

现有CSS代码 #

.tableWrapperOuter {
  width: 100% //if screen is large, take up the full size

  @media screen and (max-width: $minTableWidth) { //if the screen is small, add scroll
    overflow-x: auto;
  }
}

.tableWrapperInner {
  min-width: 900px; //force the table to be normal size
}

.tableRowTemplate {
  grid-template-columns: minmax(100px, 1fr) minmax(80px, 1fr) minmax(150px, 1fr) minmax(150px, 1fr) minmax(80px, 1fr) 80px 10px;
}

调整方案 #

1. 修复CSS语法错误
   现有代码中width: 100%后缺少分号，会导致样式解析异常，先补上：

   .tableWrapperOuter {
     width: 100%; 
   }
   

2. 重构滚动触发逻辑
   移除原媒体查询，让外层容器始终启用横向滚动，依靠内层容器的最小宽度控制滚动条出现时机，这样更简洁且逻辑更稳定：

   .tableWrapperOuter {
     width: 100%;
     overflow-x: auto;
     /* 可选：添加内边距避免表格贴边，同时修正盒模型 */
     padding: 0 1rem;
     box-sizing: border-box;
   }
   

3. 确保表格尺寸正常
   给表格添加宽度设置，让它在大屏幕下撑满内层容器，同时配合内层的min-width保证最小显示尺寸：

   .applicationTable {
     width: 100%;
     border-collapse: collapse; /* 可选：优化表格边框合并显示 */
   }
   

   确认.tableRowTemplate的网格布局已正确应用到表格行元素上，避免列宽设置失效。

4. 优化移动端滚动体验
   可以给滚动容器添加自定义滚动条样式，提升移动端视觉体验：

   .tableWrapperOuter {
     scrollbar-width: thin; /* Firefox */
   }
   .tableWrapperOuter::-webkit-scrollbar {
     height: 6px; /* Chrome/Safari */
   }
   .tableWrapperOuter::-webkit-scrollbar-thumb {
     background-color: #ccc;
     border-radius: 3px;
   }
   

内容的提问来源于stack exchange，提问作者klettg