如何让表格的水平滚动条始终固定在屏幕可视区域底部

首先给你的表格套一层父容器，调整HTML结构如下：

<div class="table-wrapper">
  <!-- 原有table标签及内容保持不变 -->
</div>

在你原有CSS的基础上新增父容器样式即可：

/* 原有样式保持不变 */
th,
td {
    white-space: nowrap;
}
table {
    table-layout: auto;
}

/* 新增样式 */
.table-wrapper {
  overflow-x: auto;
  position: sticky;
  bottom: 0;
  z-index: 10;
  background-color: #fff;
  /* 如果页面底部有固定的导航栏、页脚，可修改bottom值做偏移，例：bottom: 60px; */
}

实现效果 #

• 表格整体在视口可视范围内时，水平滚动条默认显示在表格底部，表格宽度未超出视口时滚动条自动隐藏
• 表格行数过多、底部超出视口范围时，水平滚动条会自动吸附在屏幕底部，无需滚动到表格底部即可直接拖动查看横向内容

该方案为纯CSS实现，所有现代浏览器（Chrome、Firefox、Safari、Edge）均原生支持，无需引入额外JS逻辑。如果需要兼容IE浏览器，可以补充监听页面滚动的JS逻辑，动态调整容器位置即可。

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