如何用CSS固定HTML表格底部的分页行？

完全可以用纯CSS实现，你之前的问题出在对tfoot整体设置粘性，以及表格的滚动容器配置上。按以下步骤调整即可：

关键修改点 #

• 把表格的滚动行为从table转移到tbody，让表头和表尾能正常基于容器定位
• 给分页行单独添加类名，只对这一行设置粘性定位
• 修正容器高度，保证滚动区域正确
• 给粘性行添加背景色，避免滚动时被内容穿透

修改后的代码 #

CSS部分 #

/* Center the grid container */
.container {
  width: 800px;
  height: 600px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Grid style */
#grid {
  margin-top: 25px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  max-width: 90%;
  min-width: 400px;
  overflow: hidden;
  height: auto;
  max-height: 473px;
}

/* Table size - 核心修改：让table恢复默认display，把滚动移到tbody */
table {
  margin: 0 auto !important;
  border-spacing: 0;
  width: 100%; /* 确保表格占满容器 */
}

/* 让tbody成为滚动容器 */
tbody {
  white-space: nowrap;
  display: block;
  height: 388px; /* 固定tbody高度，产生垂直滚动 */
  overflow-y: auto;
  overflow-x: auto;
}

/* 让thead和tfoot的行保持表格布局，和tbody列对齐 */
thead tr, tfoot tr {
  display: table;
  width: 100%;
  table-layout: fixed; /* 固定列宽，避免错位 */
}

.caption {
  padding: 10px 10px 0px 10px;
  font-weight: bold;
  background: #b3b3b3;
  border-bottom: 1px solid #c8c6c6;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Columns style */
th {
  background: #b3b3b3 !important;
  vertical-align: bottom;
  text-transform: capitalize;
}

th.fixed {
  position: sticky;
  right: 0;
  z-index: 2;
}

td.fixed {
  position: sticky;
  right: 0;
  z-index: 1;
}

/* Header row style */
thead tr {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* 分页行粘性定位 - 核心修改 */
tfoot .pagination-row {
  position: sticky;
  bottom: 0;
  z-index: 2;
  background: #fff; /* 添加背景，避免被tbody内容穿透 */
}

HTML部分 #

只需要给分页的那一行添加pagination-row类：

<div class="container">
  <div id="grid">
    <div class="caption row justify-content-evenly">
      <h5 class="col-11">This is the caption</h5>
      <button id="closeBtn col" type="button" class="btn-close"></button>
    </div>
    <table class="table table-striped table-hover table-bordered">
      <thead>
        <tr>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th class="fixed">Actions</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>Double Bastard Ale</td>
          <td>Red Stripe</td>
          <td>Pilsner</td>
          <td>Newport</td>
          <td>1388 - Belgian Strong Ale</td>
          <td>Wheat mal</td>
          <td>2.8%</td>
          <td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button>&nbsp;<button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
        </tr>
        <tr>
          <td>Brooklyn Black</td>
          <td>Samuel Adams</td>
          <td>Stout</td>
          <td>Mt. Rainier</td>
          <td>2206 - Bavarian Lager</td>
          <td>Rye malt</td>
          <td>3.7%</td>
          <td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button>&nbsp;<button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
        </tr>
        <tr>
          <td>St. Bernardus Abt 12</td>
          <td>Paulaner</td>
          <td>Light Lager</td>
          <td>Liberty</td>
          <td>3278 - Belgian Lambic Blend</td>
          <td>Chocolate malt</td>
          <td>3.6%</td>
          <td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button>&nbsp;<button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
        </tr>
        <tr>
          <td>Westmalle Trappist Tripel</td>
          <td>Samuel Adams</td>
          <td>India Pale Ale</td>
          <td>Equinox</td>
          <td>3942 - Belgian Wheat</td>
          <td>Caramel</td>
          <td>4.6%</td>
          <td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button>&nbsp;<button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
        </tr>
        <tr>
          <td>Trappistes Rochefort 8</td>
          <td>Pacifico</td>
          <td>German Wheat And Rye Beer</td>
          <td>Mt. Hood</td>
          <td>3278 - Belgian Lambic Blend</td>
          <td>Carapils</td>
          <td>7.9%</td>
          <td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button>&nbsp;<button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
        </tr>
        <tr>
          <td>La Fin Du Monde</td>
          <td>Harp</td>
          <td>Light Hybrid Beer</td>
          <td>Cashmere</td>
          <td>5112 - Brettanomyces bruxellensis</td>
          <td>Chocolate</td>
          <td>4.7%</td>
          <td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button>&nbsp;<button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
        </tr>
        <tr>
          <td>Sierra Nevada Celebration Ale</td>
          <td>Red Stripe</td>
          <td>Belgian And French Ale</td>
          <td>Willamette</td>
          <td>1332 - Northwest Ale</td>
          <td>Caramel</td>
          <td>8.0%</td>
          <td class="fixed"><button class="editBtn btn btn-sm btn-outline-success">Edit</button>&nbsp;<button class="delBtn btn btn-sm btn-outline-danger">Delete</button></td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <th>Total</th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th></th>
          <th class="fixed"></th>
        </tr>
        <!-- 添加pagination-row类 -->
        <tr class="pagination-row">
          <td colspan="8">
            <span>Records per page:</span>
            <span>
                           <select id="recordsPage">
                              <option value="10">10</option>
                              <option value="25">25</option>
                              <option value="50">50</option>
                              <option value="75">75</option>
                              <option value="100">100</option>
                           </select>
                        </span>
            <span>1-10</span><span> of </span><span>1000</span>
            <button class="col-1 btn btn-sm btn-outline-dark">First</button>
            <button class="col-1 btn btn-sm btn-outline-dark ms-2">Previous</button>
            <button class="col-1 btn btn-sm btn-outline-dark ms-2">Next</button>
            <button class="col-1 btn btn-sm btn-outline-dark ms-2">Last</button>
          </td>
        </tr>
      </tfoot>
    </table>
  </div>
</div>

原理说明 #

1. 把tbody设为display:block并固定高度，让tbody内部滚动，而thead和tfoot保持在表格顶部/底部
2. thead tr和tfoot tr设为display:table，保证列宽和tbody对齐，避免滚动时列错位
3. 只给分页行设置position:sticky; bottom:0，实现单独固定效果
4. 给分页行添加背景色，防止滚动时tbody内容穿透显示

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