通过为表格外层添加带 overflow: auto 的包裹容器，可使宽表格在固定宽度区域内水平滚动，同时严格限制在父容器边界内，避免内容溢出。

通过为表格外层添加带 `overflow: auto` 的包裹容器，可使宽表格在固定宽度区域内水平滚动，同时严格限制在父容器边界内，避免内容溢出。

在响应式布局或数据密集型页面中，表格列数较多时极易超出容器宽度，导致横向溢出、破坏整体布局。单纯设置 white-space: nowrap 或 table-layout: fixed 并不能约束表格尺寸——它们只影响单元格内文本换行与列宽计算，而真正的滚动控制必须由父级容器承担。

✅ 正确做法是：用一个 <div class="table-wrapper"> 包裹 <code><table>，并对该 div 设置 <code>overflow: auto（或 overflow-x: auto）。该样式会为容器创建滚动上下文，当内部表格总宽度超过容器可用宽度时，自动显示水平滚动条，且表格内容绝不会突破容器边界。

以下是完整、精简、可直接复用的实现方案：

<main>
  <h1>Table</h1>
  <div class="table-wrapper">
    <table>
      <thead>
        <tr>
          <th>Table Heading 1</th>
          <th>Table Heading 2</th>
          <th>Center align</th>
          <th>Right align</th>
          <th>Table Heading 5</th>
          <th>Table Heading 6</th>
          <th>Table Heading 7</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>Item 1</td><td>Item 2</td><td>Item 3</td><td>Item 4</td><td>Item 5</td><td>Item 6</td><td>Item 7</td></tr>
        <!-- 更多行... -->
      </tbody>
    </table>
  </div>
</main>

对应 CSS（已优化语义与维护性）：

main {
  padding: 25px;
  background-color: #ffeb3b; /* 更准确的黄色替代 */
}

h1 {
  margin-top: 0;
  margin-bottom: 16px;
}

.table-wrapper {
  overflow-x: auto; /* 明确仅启用水平滚动，避免意外垂直滚动 */
  -webkit-overflow-scrolling: touch; /* iOS 平滑滚动支持 */
}

table {
  border-collapse: collapse;
  white-space: nowrap; /* 防止表头/单元格内文字折行，保持列宽可控 */
  min-width: fit-content; /* 确保表格按内容撑开（必要时），避免过早压缩 */
}

th, td {
  padding: 10px;
  border: 1.5px solid rgba(0, 0, 0, 0.275);
}

th {
  background-color: rgba(0, 0, 0, 0.107);
  text-align: left;
}

/* 按列精准对齐（语义化优于 inline align 属性） */
th:nth-child(3), td:nth-child(3) { text-align: center; }
th:nth-child(4), td:nth-child(4) { text-align: right; }

⚠️ 注意事项：

• 勿对 <table> 直接设 <code>overflow：表格是替换元素，自身不产生块级格式化上下文，overflow 在 table 元素上无效；
• 避免 width: 100% 强制拉伸：若给 table 设 width: 100%，可能压缩列宽、破坏 white-space: nowrap 效果，应让其自然撑开；
• 移动端适配建议：可配合 @media 为小屏幕增加 max-width: 100vw 到 .table-wrapper，防止滚动容器本身溢出视口；
• 无障碍提示：为 .table-wrapper 添加 role="region" 和 aria-label="Scrollable data table" 可提升可访问性。

总结：水平滚动表格的核心在于「容器接管溢出行为」。只要用 overflow-x: auto 的 wrapper 包裹 table，并确保 wrapper 有明确的宽度约束（如继承自 main 的 padding 内区域），即可稳健实现既可滚动、又不越界的理想效果。