表格标题使用Bootstrap应放在底部

Question

表格标题通常位于表格顶部，但当我使用Bootstrap类时，它会移到表格底部。

<table class="table table-bordered">
    <caption>why?</caption>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <th>4</th>
        <td>5</td>
        <td>6</td>
    </tr>
</table>

我该如何将它与表格顶部对齐？

- Ali Rasooli

---

同样的问题在v4.3.1中出现。 - joym8

Answer 1

这是因为Bootstrap 4具有默认的标题CSS样式 - caption-side: bottom 当您更改caption-side: top;时，您的标题将位于表格顶部。

更新：Bootstrap 5

您还可以使用.caption-top将<caption>放在表格顶部。

<table class="table caption-top">
  <caption>List of users</caption>
  <thead>
    <tr></tr>
  </thead>
  <tbody>
    <tr></tr>
  </tbody>
</table>

- Mile Mijatović

---

你尝试过使用caption-side: bottom而不是caption-side: top吗？你应该把你尝试过的代码发给我，否则我无法猜测。 - Mile Mijatović

这个有没有对应的 Bootstrap 类名？ - Björn C

Bootstrap 没有特殊的类名，你可以直接使用 <caption></caption>。 - Mile Mijatović

这需要声明给 caption 标签；所以一共是这样的：caption { caption-side:top; } - Thomas Landauer

当我为标题标签编写CSS指令时，由于某种原因，它会复制表格的thead。非常奇怪。我已经将标题标签放置在表格声明之后和thead声明之前。 - SamyCode