react-bootstrap-table: 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.

issue

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

About this issue

Original URL
State: open
Created 7 years ago
Reactions: 10
Comments: 59 (16 by maintainers)

Most upvoted comments

@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';

+23

fgiarritiello on Feb 10, 2017

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

+21

kimiyang on Feb 10, 2017

I am experiencing this as well:

<BootstrapTable
    data={ this.state.templates }
    options={{ noDataText: 'No Templates Found' }}
    pagination
    striped
    hover
    condensed
    exportCSV
>
    <TableHeaderColumn dataField='id' isKey={ true }>ID</TableHeaderColumn>
    <TableHeaderColumn dataField='name'>Name</TableHeaderColumn>
    <TableHeaderColumn dataField='description'>Description</TableHeaderColumn>
</BootstrapTable>

Produces: screen shot 2017-02-02 at 10 23 59 am

Using with Google Chrome (Version 55.0.2883.95 (64-bit) react-bootstrap-table version 2.11.0

+11

dlbrown06 on Feb 2, 2017

I encountered the same header mismatch with rows issues

my code snippet

please help me have a look PS: there’s no error in the console, I inspected the component in chrome, seems the header row is rendered as one table, and the 2 rows below are rendered as another table, that’s why they are mismatched and separated. So please help to check.

I solved, it’s bootstrap css problem, can close this, thanks

+10

kimiyang on Feb 8, 2017

@AllenFang I fixed my problem by adding the below code into index.html <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css"> <link rel="stylesheet" href="http://allenfang.github.io/react-bootstrap-table/css/react-bootstrap-table-all.min.css"> both statements need to be included.

Alex-8 on Jul 30, 2017

@BenoitAverty @AllenFang That’s correct, just add the react-bootstrap-table.min.css, problem solved.

kimiyang on Feb 9, 2017

@BenoitAverty, just forgot to add the react-bootstrap-table.min.css, because there’s a gap between the header and body

AllenFang on Feb 9, 2017

Also having this issue, import 'react-bootstrap-table/dist/react-bootstrap-table.min.css'; works. thanks.

lidaof on Mar 8, 2017

bodyStyle={{overflow: 'overlay'}}, solves the problem with dynamic data in my table with scrollBars. Works only in Chrome.

Infemo on Mar 22, 2017

I’ve had the same problem after upgrading from 2.9.1. I got rid of the problem by adding ‘px’ to the width.

So width=“100px” instead of width=“100”. Without px, the colgroup section below would get messed up (ie wrong numbers).

tbjerknes on Feb 12, 2017

That was it, thanks.

BenoitAverty on Feb 9, 2017

I configured the height to height=‘300’ which made the vertical scroll bar appear. Please look into the below screenshot for this.
I also resized the browser, and am attaching its screenshot below.

@AllenFang Please note that the above results failed to yield the expected layout. Can you please research more into this. And feel free to ask for more experiments if required.

Thank you.

ashishd751 on Feb 6, 2017