Bootstrap表格caption默认显示在底部，如何将其移至表格上方？

嘿，这个问题我之前也碰到过！Bootstrap默认会把表格的caption元素渲染在底部，不过调整起来很简单，给你几个靠谱的解决方案：

方法1：用Bootstrap内置类（推荐，Bootstrap 5+适用） #

Bootstrap 5之后专门新增了caption-top类，直接给caption标签加上这个类就能把标题移到上方，完全不用自己写额外CSS：

<table class="table">
  <caption class="caption-top">这是移到表格上方的标题</caption>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">用户名</th>
      <th scope="col">邮箱</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>John Doe</td>
      <td>john@example.com</td>
    </tr>
  </tbody>
</table>

这个类会直接覆盖Bootstrap默认的caption-bottom样式，是最省心的方案。

方法2：自定义CSS（适配Bootstrap 4及更早版本） #

如果你还在使用Bootstrap 4或者更老的版本，没有caption-top类，那就用CSS原生的caption-side属性来覆盖默认样式：

/* 全局所有表格的caption都移到上方 */
.table caption {
  caption-side: top !important;
  padding-bottom: 0.5rem; /* 可选，调整标题和表格的间距 */
}

如果只想给特定表格的caption改位置，可以给caption加个自定义类：

<table class="table">
  <caption class="custom-caption-top">这是特定表格的上方标题</caption>
  <!-- 表格内容 -->
</table>

对应的CSS：

.custom-caption-top {
  caption-side: top !important;
  margin-bottom: 0.5rem;
}

这里加!important是为了确保覆盖Bootstrap默认的caption-side: bottom样式。

方法3：不用caption标签（非语义化但简单） #

如果不需要严格的语义化标签，也可以直接在表格上方放一个普通的标题元素，配合Bootstrap的间距类来调整布局：

<h5 class="mb-3">这是表格标题</h5>
<table class="table">
  <!-- 表格内容 -->
</table>

这种方式适合对语义化要求不高的场景，操作起来也很便捷。

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