react-bootstrap-table misaligned header columns

Question

I have the following:

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

Here is what all that looks like:

Why are the header columns for the table misaligned? Further, when I select one of the headers to sort the table, or when I select one of the rows in the table, the columns become properly aligned with the headers. Did I miss something?

Answer 1

I was having the same issue, and I ended up discovering that I was importing the wrong CSS file. Make sure you're using one of the CSS files listed in here.

I also used table-layout: fixed and set a specific width on each TableHeaderColumn component.

Not the most ideal solution, but it's the only thing I've found that works.

Answer 2

I had same issue . This below import in the app.js solved my problem

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