Table Header width and Table Body width mismatch and unaligned

I am using “react-bootstrap-table” with version 2.11.0 and i am facing the following issue -

     1] **The header columns width do not match with their corresponding body columns width.
          It looks as if data of one column belongs to some other column.
          All the data is unaligned.**

     2] This is my jsx code : 

          `<div className="container">                
            <BootstrapTable data={this.createRows() } deleteRow={ true } exportCSV={ true } cellEdit={ cellEditProp } striped selectRow={ selectRowProp } pagination={true} options={ options } insertRow>
                <TableHeaderColumn width="31" row="0" rowSpan='3' isKey dataField='id' export={ false } >ID</TableHeaderColumn>
                <TableHeaderColumn width="82" row="0" rowSpan='3' dataField='direct' filter={ { type: 'RegexFilter', placeholder: 'Please enter a value' } }>Direct/HQ</TableHeaderColumn>
                <TableHeaderColumn width="82" row="0" rowSpan='3' dataField='region' filter={ { type: 'RegexFilter', placeholder: 'Please enter a value' } }>Region</TableHeaderColumn>
                <TableHeaderColumn width="96" row="0" rowSpan='3' dataField='country' headerAlign='center' dataAlign='center' filter={ { type: 'RegexFilter', placeholder: 'Please enter a value' } }>Destination Country</TableHeaderColumn>
                <TableHeaderColumn  row="0" rowSpan='3' dataField='operator' headerAlign='center' dataAlign='center' filter={ { type: 'RegexFilter', placeholder: 'Please enter a value' } }>Destination Operator</TableHeaderColumn>
                <TableHeaderColumn row='0' colSpan='5' headerAlign='center'>By Performance</TableHeaderColumn>
                <TableHeaderColumn row="1" rowSpan='2' dataField='coverage' editable={ false } dataSort={true} dataFormat={ ProgressFormatter } filter={ { type: 'NumberFilter' } }>% Coverage</TableHeaderColumn>
                <TableHeaderColumn row="1"  rowSpan='2' dataField='options' filter={ { type: 'RegexFilter', placeholder: 'Please enter a value' } }>Destination Operator Options</TableHeaderColumn>
                <TableHeaderColumn row="1"   rowSpan='2' dataField='smpp' editable={ false } filter={ { type: 'SelectFilter', options: qualityType } } dataFormat={ enumFormatter } formatExtraData={ qualityType }>SMPP/SS7</TableHeaderColumn>
                <TableHeaderColumn row="1"  rowSpan='2' dataField='tpoa' editable={ false } filter={ { type: 'SelectFilter', options: ack } } dataFormat={ enumFormatter } formatExtraData={ ack }>Alphanumeric TPOA Supported</TableHeaderColumn>
                <TableHeaderColumn row="1"  rowSpan='2' dataField='mobile' editable={ false } filter={ { type: 'SelectFilter', options: ack } } dataFormat={ enumFormatter } formatExtraData={ ack }>Mobile Ack</TableHeaderColumn>
                <TableHeaderColumn row='0'  colSpan='4'  headerAlign='center'>By Price</TableHeaderColumn>
                <TableHeaderColumn row='1'  colSpan='4'  headerAlign='center'>Volume Banded SMS MT Fee (Max) </TableHeaderColumn>
                <TableHeaderColumn row="2" dataField='first' dataFormat={ priceFormatter } filter={ { type: 'NumberFilter' } }
                    filterFormatted>1-2, 50, 000</TableHeaderColumn>
                <TableHeaderColumn row="2" dataField='second' dataFormat={ priceFormatter } filter={ { type: 'NumberFilter' } }
                    filterFormatted>2, 50, 001-5, 00, 000</TableHeaderColumn>
                <TableHeaderColumn row="2" dataField='third' dataFormat={ priceFormatter } filter={ { type: 'NumberFilter' } }
                    filterFormatted>5, 00, 001-10, 00, 000</TableHeaderColumn>
                <TableHeaderColumn row="2" dataField='fourth' dataFormat={ priceFormatter } filter={ { type: 'NumberFilter' } }
                    filterFormatted>10, 00, 001-Over</TableHeaderColumn>
            </BootstrapTable>
        </div>`

     3] I've read various other similar issues, but none of the solutions seem to work. 

     4] I have imported the "react-bootstrap-table-all.min.css".

     5] I am using Chrome browser with Version 55.0.2883.87 m

     6] I am attaching a screenshot of the mis-aligned table.

@AllenFang , can you please look into this issue and respond as soon as possible

[fgiarritiello]

@kzbikowski try to import react-bootstrap-table.min.css in your app.js by using this: import 'react-bootstrap-table/dist/react-bootstrap-table.min.css';

[kimiyang]

@fgiarritiello try to use <link rel="stylesheet" href="https://npmcdn.com/react-bootstrap-table/dist/react-bootstrap-table.min.css">, use “href” not “src”