twitter-bootstrap – 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>

但是,这给了我一些有趣的结果.这是我的表格(表格位于react-bootstrap的Tab中：

我做错了什么？最奇怪的部分是顶部的标题工作,但实际附加到表的标题什么都不做.

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

但是,虽然这修复了双头问题,但它仍然存在未对齐标头列的问题.该表现在看起来像这样：

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

更新：
使用其中一个标头执行排序可修复对齐问题.但是为什么一开始会被打破？