react-bootstrap-table 双标头

Question

使用react-bootstrap-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>

但是，这给了我一些有趣的结果。这就是我的桌子的样子（桌子位于Tab 中，来自react-bootstrap：

我做错了什么？最奇怪的部分是顶部的标题可以工作，但实际上附加到表格的标题什么也不做。

编辑：重新导入 css 后的表格 在我的index.html 我现在有：

但是，虽然这解决了双标题问题，但它保留了未对齐标题列的问题。表格现在看起来像这样：

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

更新： 使用其中一个标题执行排序修复了对齐问题。但是为什么一开始就坏了呢？

Answer 1

来自他们的GitHub Issues

你需要重新导入css文件:)

您可以在此 codepen 中看到此功能。如果您从设置菜单中删除 boostrap-table css 文件，则会出现此问题。

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