Twitter bootstrap react引导表双表头

使用

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>

{'Interval'}
{'Status'}
{'Started'}
{'Completed'}
{'RT'}
{'
{'PID'}
{'ID'}

然而，这给了我一些有趣的结果。这就是表格的外观（表格位于

react bootstrap

的

选项卡中）：


我做错了什么？最奇怪的是顶部的标题可以工作，但是附在表上的标题却没有任何作用

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

但是，虽然这解决了双标题问题，但仍保留了标题列未对齐的问题。该表现在如下所示：


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

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

您需要重新导入css文件：）

你可以看到这个在这里面起作用。如果从“设置”菜单中删除boostrap表格css文件，则会出现此问题

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

关于错位的新问题：