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问题

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

你可以看到这个在这个codepen中工作.如果从设置菜单中删除了boostrap-table css文件,则会出现此问题.

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