通过为表格外层添加带 overflow: auto 的包裹容器，可使宽表格在固定宽度区域内水平滚动，同时严格限制在父容器边界内，避免内容溢出。
通过为表格外层添加带 `overflow: auto` 的包裹容器，可使宽表格在固定宽度区域内水平滚动，同时严格限制在父容器边界内，避免内容溢出。
在响应式布局或数据密集型页面中，表格列数较多时极易超出容器宽度，导致横向溢出、破坏整体布局。单纯设置 white-space: nowrap 或 table-layout: fixed 并不能约束表格尺寸——它们只影响单元格内文本换行与列宽计算，而真正的滚动控制必须由父级容器承担。
✅ 正确做法是：用一个 以下是完整、精简、可直接复用的实现方案： 对应 CSS（已优化语义与维护性）： ⚠️ 注意事项： 总结：水平滚动表格的核心在于「容器接管溢出行为」。只要用 <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>
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 内区域），即可稳健实现既可滚动、又不越界的理想效果。
