प्रतिक्रिया-बूटस्ट्रैप-टेबल गलत संरेखित हैडर कॉलम

Question

मैं निम्नलिखित है:

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

यहाँ सब दिखता है जैसे:

तालिका के लिए हेडर कॉलम गलत तरीके से क्यों हैं? इसके अलावा, जब मैं तालिका को सॉर्ट करने के लिए शीर्षलेखों में से एक का चयन करता हूं, या जब मैं तालिका में पंक्तियों में से एक का चयन करता हूं, तो कॉलम हेडर के साथ ठीक से गठबंधन हो जाते हैं। क्या मैं कुछ भुल गया?

Answer 1

मुझे एक ही समस्या थी, और मैंने यह पता चला कि मैं गलत सीएसएस फ़ाइल आयात कर रहा हूं। सुनिश्चित करें कि आप here में सूचीबद्ध सीएसएस फ़ाइलों में से एक का उपयोग कर रहे हैं।

मैंने table-layout: fixed का भी उपयोग किया और प्रत्येक TableHeaderColumn घटक पर एक विशिष्ट चौड़ाई निर्धारित की।

सबसे आदर्श समाधान नहीं है, लेकिन यह एकमात्र चीज है जिसे मैंने पाया है।