react引导表未对齐的标题列

IT技术 css twitter-bootstrap reactjs react-bootstrap
2021-05-26 11:30:45

我有以下几点：

节点.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>
    );
  }
});

实例.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>
    );
  }
});

这是所有的样子：

在此处输入图片说明

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

4个回答

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

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

不是最理想的解决方案，但这是我发现唯一有效的方法。

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

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

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

所以我的建议是动态设置每一行的宽度（基于字符串长度并将其限制为 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;
   }
}

我创建了一个 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);
其它你可能感兴趣的问题
上一篇在 Webpack + React 中使用内联 css-loader 下一篇Reactjs - 将props继承到一级子级和嵌套子级的正确方法