overflow-x在表格单元格内不生效，如何实现全局横向滚动？

要让横向滚动div在表格单元格和单独场景都正常工作，核心是让滚动容器自身具备独立的宽度约束能力，不依赖父容器（表格单元格）的样式，具体方案如下：

核心样式配置 #

给滚动容器添加以下CSS，确保它能自主控制宽度并触发横向滚动：

.scroll-container {
  /* 确保容器不超出父容器宽度，同时可设置最小宽度避免过窄 */
  max-width: 100%;
  min-width: 200px; /* 可选，根据需求调整 */
  /* 核心：开启横向滚动 */
  overflow-x: auto;
  /* 处理文本内容：禁止换行，保持横向排列 */
  white-space: nowrap;
  /* 确保内边距/边框不影响宽度计算 */
  box-sizing: border-box;
  /* 可选：添加内边距和边框，提升视觉效果 */
  padding: 8px;
  border: 1px solid #eee;
}

针对块级内容的适配 #

如果滚动容器内是横向排列的块级元素（比如卡片、按钮组），调整样式如下，防止子元素被压缩：

.scroll-container {
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
  padding: 8px;
}

/* 内部用flex布局实现横向排列 */
.scroll-content {
  display: flex;
  gap: 12px; /* 子元素间距 */
}

/* 禁止子元素被压缩，保持原有宽度 */
.scroll-content .item {
  flex-shrink: 0;
  width: 150px; /* 子元素固定宽度 */
  height: 80px;
  background: #f5f5f5;
  border: 1px solid #ddd;
}

示例HTML结构 #

不管是单独使用还是放入表格单元格，结构统一：

<!-- 单独使用场景 -->
<div class="scroll-container">
  这是一段超长文本内容，用来测试横向滚动效果，这是一段超长文本内容，用来测试横向滚动效果
</div>

<!-- 表格内场景 -->
<table>
  <tr>
    <td>
      <div class="scroll-container">
        这是一段超长文本内容，用来测试横向滚动效果，这是一段超长文本内容，用来测试横向滚动效果
      </div>
    </td>
  </tr>
</table>

关键原理说明 #

表格单元格默认会根据内容自动调整宽度（table-layout: auto），通过给滚动容器设置max-width: 100%，强制容器宽度不超过单元格的可用空间，同时overflow-x: auto会在内容超出容器宽度时触发滚动，避免撑开表格。这种方式不需要修改任何表格样式，完全依赖滚动容器自身的CSS，满足组件复用的需求。

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