如何实现可滚动表格中按钮相对视口居中且边框固定（无JS）

问题场景 #

有个列宽超出容器的表格，会出现水平滚动。表格最后一行是个占满整行的单元格，里面放着「Show more」按钮，原本的代码是这样的：

<tr>
    <td colspan='100%'>
        <button>Show more</button>
    <td>
</tr>

现在需要实现两个效果：

• 表格左右滚动时，按钮始终在视口正中间
• 该行左侧的黄色边框（border: 2px solid yellow）不随滚动移动，视觉上就是行自带的左边框
• 全程不能用JavaScript

之前试过用position: sticky加colspan="4"的方案，但按钮只是在那个粘性单元格里居中，没法做到相对视口居中，代码是这样的：

<tr>
  <td class='sticky' colspan="4">
    <button>
      Show more
    </button>
  </td>
  <td class='red' colspan="100%"></td>
</tr>

纯CSS解决方案 #

可以通过两个粘性元素配合搞定，不用JS。

关键思路 #

1. 单独做个左粘性的单元格，专门用来固定左侧的黄色边框，让它一直贴在视口左边
2. 按钮用「粘性定位+水平居中技巧」，脱离表格单元格的布局限制，直接相对于视口居中
3. 底部行和粘性单元格要设置和表格一样的背景色，避免滚动时露出底下的内容

完整代码示例 #

HTML结构

<table>
  <!-- 表格内容行，撑出水平滚动效果 -->
  <tr>
    <td>第一列</td>
    <td>第二列</td>
    <td>第三列</td>
    <td>第四列</td>
    <td>第五列</td>
    <td>第六列</td>
    <td>第七列</td>
    <td>第八列</td>
    <td>第九列</td>
    <td>第十列</td>
  </tr>
  <!-- 底部按钮行 -->
  <tr class="bottom-row">
    <td class="sticky-left-border" colspan="1"></td>
    <td class="btn-wrapper" colspan="99">
      <button class="center-btn">Show more</button>
    </td>
  </tr>
</table>

CSS样式

/* 表格基础设置 */
table {
  width: 100%;
  border-collapse: collapse;
  overflow-x: auto;
  display: block;
}

td {
  padding: 10px;
  border: 1px solid #ccc;
  min-width: 150px; /* 强制列宽，触发水平滚动 */
}

/* 底部行背景与表格保持一致 */
.bottom-row {
  background: #ffffff;
}

/* 左侧固定的黄色边框 */
.sticky-left-border {
  position: sticky;
  left: 0;
  border-left: 2px solid yellow;
  background: #ffffff; /* 覆盖背景，防止滚动时透色 */
  width: 0; /* 只保留边框，不占用额外宽度 */
  padding: 10px 0;
}

/* 按钮容器 */
.btn-wrapper {
  position: relative;
  padding: 10px 0;
}

/* 始终居中的按钮 */
.center-btn {
  position: sticky;
  left: 50%;
  transform: translateX(-50%);
  /* 按钮美化样式 */
  padding: 8px 16px;
  border: none;
  background: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

效果说明 #

• 左侧的sticky-left-border单元格通过sticky定位固定在视口左侧，宽度设为0只显示黄色左边框，背景色与表格一致避免透色
• 按钮用left: 50%加transform: translateX(-50%)实现绝对居中，配合position: sticky，让它在表格滚动时始终停在视口中间
• 底部行设置背景色，避免滚动时表格内容从按钮行下方露出来

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