基于Bootstrap实现表格分页固定底部 不受数据为空/数量少影响

以下是基于Bootstrap 5的几种可行实现方案，你可以根据实际需求选择：

方案1：固定表格底部间距（最简单） #

直接给表格添加Bootstrap自带的下边距工具类，即可让分页和表格之间始终保持固定间距，不受表格内容多少影响：

• 找到你的<table>标签，在class属性中添加mb-*类，*可替换为1~5的数字，数值越大间距越大，示例代码：

<table class="table mb-5">
<thead>
<th>Header 1</th>
<th>Header 2</th>
</thead>
<tbody>
  <tr>
    <td>No data</td>    
    <td></td>
  </tr>
</tbody>
</table>
<div>
<p>
Pagination here..
</p>
</div>

该方案无需修改原有结构，适合仅需要分页和表格保持固定间距的场景

方案2：固定表格区域最小高度 #

如果需要表格区域无论数据多少都占用固定高度，分页始终在整个表格区域的底部，可以给表格套一个设置了最小高度的外层容器：

1. 新增外层容器，设置最小高度，你可以直接用Bootstrap自带的min-vh-*类（基于视口高度），也可以自定义高度：

<!-- 自定义最小高度可以自行调整数值 -->
<div style="min-height: 400px;">
  <table class="table">
  <thead>
  <th>Header 1</th>
  <th>Header 2</th>
  </thead>
  <tbody>
    <tr>
      <td>No data</td>    
      <td></td>
    </tr>
  </tbody>
  </table>
</div>
<div>
<p>
Pagination here..
</p>
</div>

该方案适合需要统一表格区域占位高度的场景

方案3：自适应容器高度布局 #

如果需要表格区域自适应父容器剩余高度，分页始终固定在父容器底部，可以用Bootstrap的flex布局工具类实现：

<!-- 父容器设置垂直flex布局，高度按需调整 -->
<div class="d-flex flex-column" style="height: 500px;">
  <table class="table flex-grow-1">
  <thead>
  <th>Header 1</th>
  <th>Header 2</th>
  </thead>
  <tbody>
    <tr>
      <td>No data</td>    
      <td></td>
    </tr>
  </tbody>
  </table>
  <div>
  <p>
  Pagination here..
  </p>
  </div>
</div>

该方案适合需要适配父容器高度的响应式场景

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