我来帮你搞定这个横向滚动表格撑大页面的问题！其实问题出在你的外层容器和表格的样式搭配上：

• 你的.wrapper_用了inline-block，它会跟着内部表格的宽度自适应，一旦表格内容过宽，就会直接把整个页面的宽度撑爆
• 表格本身设置了overflow: scroll，但这个属性对表格元素的效果并不如预期，应该把滚动逻辑交给外层容器

下面是具体的修改方案，直接替换你的CSS和保持HTML结构即可：

修改后的CSS代码 #

.wrapper_ { /* 表格外层容器 */
  display: block; /* 把inline-block改成block，让容器占满父元素宽度（或自定义宽度） */
  max-width: 100%; /* 强制容器不超出页面宽度 */
  overflow-x: auto; /* 仅在容器内部显示横向滚动条，不会影响整个页面 */
  overflow-y: hidden;
  /* 如果想保持表格宽度为原来的60%，可以加上下面两行 */
  /* width: 60%; */
  /* margin: 0 auto; */
}

.wrapper { /* 表格 */
  height: 40%;
  width: 100%; /* 让表格占满外层容器的宽度 */
  white-space: nowrap; /* 保持单元格不换行，确保横向滚动有效 */
  border-collapse: collapse;
  padding: 0;
  margin: 0;
}

保持原HTML结构即可 #

<div class="wrapper_">
<table border="1" style="font-size:10pt;" class="wrapper">
<tr>
<th></th>
<th>受注番号</th>
<th>会社名</th>
<th>受注日</th>
<th>販売会社</th>
<th>契約年数</th>
<th>月額利用料</th>
</tr>
<tbody>
<!-- SOME PHP INSIDE -->
</tbody>
</table>
</div>

修改后效果：外层容器会被牢牢限制在页面宽度范围内，当表格内容过宽时，只会在容器内部出现横向滚动条，再也不会导致整个页面宽度超出正常范围啦！

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