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

Question

我尝试使用 react-bootstrap-table2 "Table with caption" example, but my caption is below the table. I found this answer: , but it's not about react-bootstrap-table2 and it doesn't give an example. Then I found this page: caption-side.

中的代码

所以我创建了 tables.css:

.top caption {
  caption-side: top;
}

我使用 import './tables.css'; 导入了它。然后我将 class 名称添加到我的 table:

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

但是标题还在table下面。

如何让标题位于 table 上方？

Answer 1

bootstrap-table-next 上的 caption 道具作为普通的 HTML 标题标签。我创建了一个示例沙箱来玩 table.

的 caption 放置

观察结果:

Using the same demo caption element from the storybook, I was able to change placement of caption on top or bottom.

Note that the caption tag renders inside a div with class 'table' and NOT top. To achive that, adding below style (with keeping the same JS) would place your caption above/below the table -

table caption {
  caption-side: top;
}

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

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

How do I get a react-bootstrap-table2 caption to be above the table instead of below it?

css

reactjs

react-bootstrap-table