使用 Bootstrap 使表格标题显示在底部

Question

我正在声明一个带有标题的表格：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered">
    <caption>Why does this display below contents?</caption>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>

但是，即使

caption

元素是

table

的第一个子元素，当我使用 Bootstrap 类时，标题会显示在表格下方。

如何将其移动到桌子上方？

Answer 1

那是因为从版本 4 开始，Bootstrap 有了默认的标题 css 样式 -

caption-side: bottom

当您更改

caption-side: top;

时，您的标题将显示在表格顶部。

更新

从版本5开始，您还可以使用

<caption>

将

.caption-top放在桌子顶部：

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-bordered caption-top">
    <caption>Caption displayed above contents</caption>
    <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>