如何让 react-bootstrap-table2 标题位于表格上方而不是下方？

Question

我尝试使用 react-bootstrap-table2 "Table with caption" example 中的代码，但我的标题在表格下方。我找到了这个答案："That's because bootstrap 4 has default caption css style - caption-side: bottom"，但这与 react-bootstrap-table2 无关，也没有给出示例。然后我找到了这个页面：caption-side。

所以我创建了tables.css：

.top caption {
  caption-side: top;
}

我使用import './tables.css'; 导入了它。我将类名添加到我的表中：

    <BootstrapTable
      className="top"
      bootstrap4={ true }
      caption={ <CaptionElement /> }
      keyField='id'
      data={ data.team.bids }
      columns={ columns }
      striped
      hover />

但标题还在桌子底下。

如何让标题位于表格上方？

Answer 1

bootstrap-table-next 上的 caption 属性用作纯 HTML 标题标签。 我创建了一个示例沙盒来放置caption 用于桌子。

观察：

1. 使用故事书中相同的演示标题元素，我能够更改标题在顶部或底部的位置。
2. 请注意，caption 标记在具有类“table”的 div 内呈现，而不是 top。为了实现这一点，添加以下样式（保持相同的 JS）会将您的标题放在表格上方/下方 -

table caption {
  caption-side: top;
}

沙盒链接 - https://codesandbox.io/embed/react-boot-table-caption-placement-1mvql