反應的自舉表雙頭

使用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 –

反應的自舉表雙頭

回答

相關問題