实现缩放与滚动时始终居中的表格信息栏方案问询

核心解决方案 #

通过相对定位容器 + 绝对定位信息栏 + transform平移的组合，实现信息栏在缩放、滚动时始终居中，同时避免被滚动条遮挡。

修改后的代码 #

CSS

.tableWrapper {
  overflow-x: auto;
  width: 400px;
  height: 120px; /* 增加高度留出信息栏空间，避免内容重叠 */
  position: relative; /* 为内部绝对定位元素提供参照 */
}

table {
  border: 1px solid black;
  font-size: 18px;
  width: 800px; /* 示例宽表格，模拟横向滚动场景 */
}

.infoDiv {
  position: absolute;
  left: 50%;
  transform: translateX(-50%); /* 基于自身宽度居中，适配缩放 */
  bottom: 8px; /* 距离容器底部一定距离，避开滚动条 */
  text-align: center;
  width: 100%; /* 确保文本在容器范围内居中，不会超出 */
  background: #fff; /* 可选，避免被表格内容透过显示 */
}

HTML

<div class="tableWrapper">
  <table class="table">
    <thead>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
      <th>Column 7</th>
      <th>Column 8</th>
      <th>Column 9</th>
      <th>Column 10</th>
    </thead>
    <tbody>
    </tbody>
  </table>
  
  <div class="infoDiv">
    No Results Found
  </div>
</div>

方案原理 #

1. position: relative 容器：让信息栏的绝对定位以容器为参照，而非整个页面，确保滚动时信息栏固定在容器范围内。
2. left: 50% + transform: translateX(-50%)：
   • left:50% 将信息栏的左边缘定位到容器水平中点。
   • transform: translateX(-50%) 把信息栏向左平移自身宽度的一半，实现基于元素自身宽度的精准居中，缩放时会自动适配容器尺寸变化，不会像固定left值那样失效。
3. bottom 属性：控制信息栏距离容器底部的距离，避免被横向滚动条遮挡。
4. width: 100%：确保信息栏的文本始终在容器宽度范围内居中，不会超出容器边界。

适配说明 #

• 无论表格宽度如何变化，只要容器是横向滚动状态，信息栏都会保持在容器可视区域的水平中点。
• 缩放页面（Ctrl+/-）时，transform的平移比例会自动跟随容器和元素的尺寸变化，保持居中效果。
• 滚动表格时，信息栏不会随表格内容滚动，始终固定在容器的可视区域内。

内容的提问来源于stack exchange，提问作者gene b.