react-bootstrap-table 双 header

Question

使用 react-bootstrap-table，我创建了一个 table 如下：

<BootstrapTable data={props.instances} hover condensed selectRow={props.selectRowOpts}>
  <TableHeaderColumn dataField={'interval_value'} dataSort>{'Interval'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'status_name'} dataSort>{'Status'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'started_ts'} dataSort>{'Started'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'completed_ts'} dataSort>{'Completed'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'last_runtime'} dataSort>{'RT'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'attempts'} dataSort>{'Attempts'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'pid'} dataSort>{'PID'}</TableHeaderColumn>
  <TableHeaderColumn dataField={'node_instance_id'} dataSort isKey>{'ID'}</TableHeaderColumn>
</BootstrapTable>

但是，这给了我一些有趣的结果。这就是 table 对我来说的样子（table 位于 react-bootstrap 的 Tab 内：

我做错了什么？最奇怪的部分是顶部的 header 有效，但实际上附加到 table 的 header 什么都不做。

编辑：table 重新导入后 css 在我的 index.html 中，我现在有：

然而，虽然这修复了双重 header 问题，但它保留了未对齐的 header 列的问题。 table 现在看起来像这样：

我也尝试了 react-bootstrap-table-all.min.css 文件，但得到了相同的结果。

更新： 使用 header 之一执行排序可修复对齐问题。但为什么一开始就坏了？

Answer 1

来自他们的GitHub Issues

You need re-import the css file :)

您可以在 codepen 中看到它的工作原理。如果您从设置菜单中删除 boostrap-table css 文件，就会出现此问题。

https://rawgit.com/AllenFang/react-bootstrap-table/master/css/react-bootstrap-table.min.css

react-bootstrap-table 双 header

react-bootstrap-table double header

twitter-bootstrap

reactjs

react-bootstrap