twitter-bootstrap – react-bootstrap-table双头

发布时间：2020-12-17 21:30:33 所属栏目：安全来源：网络整理

导读：使用react-bootstrap-table,我创建了一个表,如下所示： BootstrapTable data={props.instances} hover condensed selectRow={props.selectRowOpts} TableHeaderColumn dataField={'interval_value'} dataSort{'Interval'}/TableHeaderColumn TableHeaderColu

使用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中：

enter image description here

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

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

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

enter image description here

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

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

解决方法

从他们 GitHub Issues

You need re-import the css file
（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!