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

Question

我尝试使用 react-bootstrap-table2 “带标题的表格”示例中的代码，但我的标题在表格下方。 我找到了这个答案： “那是因为 bootstrap 4 具有默认标题 css 样式 - caption-side: bottom” ，但这与 react-bootstrap-table2 无关，也没有给出示例。 然后我找到了这个页面： caption-side 。

所以我创建了tables.css ：

.top caption {
  caption-side: top;
}

我使用import './tables.css'; . 我将 class 名称添加到我的表中：

    <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标签呈现在带有 class 'table' 而不是top的 div 内。 为了实现这一点，添加以下样式（保持相同的 JS）会将您的标题放在表格上方/下方 -

table caption {
  caption-side: top;
}

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