本文介绍如何通过包裹容器实现表格的水平滚动功能，确保在视口宽度不足500px时自动显示横向滚动条，同时保持首列30%、次列70%的精确比例布局。
本文介绍如何通过包裹容器实现表格的水平滚动功能，确保在视口宽度不足500px时自动显示横向滚动条，同时保持首列30%、次列70%的精确比例布局。
要让具有百分比列宽（如 30% / 70%）的表格支持水平滚动，关键在于不能直接对 <table> 元素设置 overflow-x: auto——因为 <table> 是内联块级元素，其 overflow 属性在标准文档流中通常无效，且百分比宽度依赖于父容器计算，直接作用于 table 会导致布局失效或滚动不可用。
✅ 正确方案：使用 div 包裹容器（wrapper）承载表格，并将滚动行为赋予该容器：
.wrap {
overflow-x: auto; /* 启用横向滚动 */
-webkit-overflow-scrolling: touch; /* 提升移动端滑动体验 */
}
table {
max-width: 1000px;
min-width: 500px; /* 表格最小宽度，触发滚动的阈值 */
width: 100%; /* 在 wrapper 内尽可能撑满（但受 min/max 限制） */
border-collapse: collapse; /* 推荐：避免边框重复 */
table-layout: fixed; /* 关键！确保百分比列宽严格生效 */
}
.first {
width: 30%;
border: 1px solid #ccc;
padding: 8px;
}
.second {
width: 70%;
border: 1px solid #ccc;
padding: 8px;
}HTML 结构如下（注意修正了原代码中的 <th> 闭合标签错误）：
<div class="wrap">
<table>
<thead>
<tr>
<th class="first">Title one</th>
<th class="second">Title two</th>
</tr>
</thead>
<tbody>
<tr>
<td class="first">Content one</td>
<td class="second">Content two</td>
</tr>
<!-- 可添加更多行以验证滚动效果 -->
</tbody>
</table>
</div>? 重要说明与最佳实践：
- table-layout: fixed 是保障 width: 30%/70% 精准生效的前提，否则浏览器会按内容自动计算列宽，覆盖百分比设定；
- width: 100% 配合 min-width: 500px 和 max-width: 1000px，使表格在容器内弹性伸缩，仅当容器宽度 < 500px 时，.wrap 因无法容纳最小表格而触发横向滚动；
- 避免在 table 上设置 overflow，它不适用于表格元素；所有滚动逻辑必须由外部 div 承担；
- 若需兼容旧版 IE，可添加 white-space: nowrap 到 td/th 防止文本换行干扰宽度计算（但需配合 text-overflow: ellipsis 处理溢出）。
最终效果：当浏览器窗口宽度小于 500px 时，.wrap 显示水平滚动条，用户可左右拖拽查看完整表格；在 500px–1000px 区间内，表格自适应填充；超过 1000px 后宽度锁定在 1000px，右侧留白。列宽比例始终严格维持 30% : 70%。
