react-bootstrap-table 未对齐的标题列

Posted 2023-02-22

【中文标题】react-bootstrap-table 未对齐的标题列

【英文标题】：react-bootstrap-table misaligned header columns

【发布时间】：2016-03-07 09:25:00

【问题描述】：

我有以下几点：

Node.jsx

import React from 'react';
import Col, Row, Tab, Tabs from 'react-bootstrap';
import Alerts from './Alerts';
import Details from './Details';
import Family from './Family';
import Instances from './Instances';

module.exports = React.createClass(
  displayName: 'Node',
  render () 
    return (
      <Row>
        <Col md=12>
          <Tabs defaultActiveKey=1>
            <Tab eventKey=1 title='Details'>
              <Details />
            </Tab>
            <Tab eventKey=2 title='Alerts'>
              <Alerts />
            </Tab>
            <Tab eventKey=3 title='Family'>
              <Family />
            </Tab>
            <Tab eventKey=4 title='Instances'>
              <Instances instances=this.props.nodeInstances/>
            </Tab>
          </Tabs>
        </Col>
      </Row>
    );
  
);

Instances.jsx

import React from 'react';
import BootstrapTable, TableHeaderColumn from 'react-bootstrap-table';

module.exports = React.createClass(
  displayName: 'NodeInstances',
  getDefaultProps () 
    return 
      selectRowOpts: 
        mode: "radio",
        clickToSelect: true,
        hideSelectColumn: true,
        bgColor: "rgb(238, 193, 213)",
        onSelect: (row, isSelected) =>  console.log(row, isSelected); 
      
    ;
  ,
  render () 
    var props = this.props;

    return (
      <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>
    );
  
);

这就是所有的样子：

为什么表格的标题列未对齐？此外，当我选择其中一个标题对表格进行排序时，或者当我选择表格中的某一行时，这些列将与标题正确对齐。我错过了什么吗？

【问题讨论】：

我遇到了同样的问题，在 bootstrap.css 稍微解决了我的问题之前加载了我的 css

是的，我检查了三倍，但它并没有为我解决问题 :( 希望就这么简单。

你能解决这个问题吗？我面临着完全相同的问题，找不到任何有用的解决方案。

不，不幸的是我从来没有完全解决它，并且早就离开了这个项目:(

如果我不得不猜测，react-bootstrap-table 包中可能存在 React 生命周期错误：(

【参考方案1】：

我遇到了同样的问题，最后发现我导入了错误的 CSS 文件。确保您使用的是here 中列出的 CSS 文件之一。

我还使用了table-layout: fixed 并在每个TableHeaderColumn 组件上设置了特定宽度。

不是最理想的解决方案，但它是我发现的唯一可行的方法。

【参考方案2】：

我有同样的问题。 app.js 中的以下导入解决了我的问题

import 'react-bootstrap-table/dist/react-bootstrap-table.min.css';

【参考方案3】：

我有同样的问题，我尝试为所有行添加固定宽度，但这不是一个完美的解决方案。所以最后我根据文本字符串的长度为每一行创建了一个动态宽度。

所以我建议动态设置每一行的宽度（基于字符串长度，并将其限制为 24）。

在我下面的程序中，我完成了 for 循环以获取该数组中字符串的长度并将最大值分配为该列的宽度（在您的情况下为它的行）

for (let i = 0; i < (totalElementsinArray); i++) 
   if(((obj[i]["Title"]).length)> ((obj[i]["1_Content"]).length) & ((obj[i]["Title"]).length) > 24 )
      heightlength=((obj[i]["Title"]).length)-5
 else 
   if(((obj[i]["1_Content"]).length) > 24)
      heightlength=((obj[i]["1_Content"]).length)-5
    else 
      heightlength=24;
   

【参考方案4】：

我创建了一个 javascript 函数来获取真实表格标题的宽度并将它们设置为固定表格标题（实际上是在另一个表格中）：

 function fixTableCols(table) 
        var _length = [];
        var $table = $(table);
    
        $table.find('th').each(function (index, headerCol) 
           _length[index] = $(headerCol).width();
        );
        
        $table.parent().parent().find('.fixed-table-header').find('th').each(function (index, headerCol) 
            $(headerCol).find('.th-inner ').css('width', _length[index]);
        );
    

所以，你可以在应用 bootstrapTable() 之后调用这个函数，像这样：

var $table = $('table');
$table.bootstrapTable();
fixTableCols($table);