tepki-önyükleme masa aşağıdaki adres

Question

yanlış hizalanmış başlık sütunları:

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 İşte

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> 
    ); 
    } 
}); 

neyi bütün bu görünüm ise gibi:

Tablo için üstbilgi sütunları neden yanlış hizalanmış? Ayrıca, tabloyu sıralamak için üstbilgilerden birini seçtiğimde veya tablodaki satırlardan birini seçtiğimde, sütunlar üstbilgilerle düzgün şekilde hizalanır. Bir şey mi kaçırdım?

Answer 1

Aynı sorunu yaşıyordum ve yanlış CSS dosyasını içe aktardığımı keşfettim. here'da listelenen CSS dosyalarından birini kullandığınızdan emin olun.

Ayrıca table-layout: fixed kullanıyorum ve her TableHeaderColumn bileşeninde belirli bir genişlik ayarlıyorum.

En ideal çözüm değil, işte bulduğum tek şey bu.