反应的自举表双头

使用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后的表我现在有：

Howev呃，虽然这解决了双头问题，但它仍然存在未对齐的标题列的问题。现在，表看起来像这样：

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

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

来源

2015-12-02 Matthew Herbst

从他们GitHub Issues

您需要重新导入CSS文件:)

你可以看到这方面的工作在这个codepen。如果从设置菜单中删除boostrap-table css文件，问题就会显现出来。

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

来源

2015-12-02 21:16:34 Tyrsius

谢谢！请参阅我编辑的 –

有关错位的新问题：http://stackoverflow.com/questions/34054567/react-bootstrap-table-misaligned-header-columns –

反应的自举表双头

回答

相关问题