Table Header width and Table Body width mismatch and unaligned

[ashishd751]

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

[AllenFang]

@ashishd751, ok, I'll try to reproduce this issue, but not sure that I can find the root cause. could you help me to do some experiment on you code?

1. configure a height on BootstrapTable(make sure the vertical scrollbar appear), for example height='400'
2. try to resize browser

let me know the result of this two experiments

[dlbrown06]

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:

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

[AllenFang]

@dlbrown06, did you have any css or styling which break the align of table, because I thought if you dont configure width, height with a simple table, it is supposed to be rendered as well. BTW, there's any error log in console?

[ashishd751]

1. I configured the height to height='300' which made the vertical scroll bar appear. Please look into the below screenshot for this.
   

2. 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.

[simonberger]

I am getting the following warning since updating to react 15.3.2

Warning: a `col` tag (owner: `BootstrapTable`) was passed a numeric string value for CSS property `width` (value: `45`) which will be treated as a unitless number in a future version of React.

I don't think thats the cause of this issue but maybe still related.
Because you still suggest to declare width without a unit in the docs this should be either changed or the px-unit added as default if missing inside react bootstrap table.
At the moment all is still working and the warning is just be displayed in debug build

[AllenFang]

@simonberger, thanks for feedback, I'll fix this warning soon.

@ashishd751, ok, if you can give me a simple and minimal repo for me to reproduce this issue will be best and very appreciated, BTW, could you help me to make the all cells as pure text?? for example, remove the progressbar in coverage column just show the source text and all the price column should display the numeric text without unit icon,

[fgiarritiello]

I'm experiencing the same problem. I'm using 3.0.0-beta.9.

[kimiyang]

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

[BenoitAverty]

@kimiyang I have the same problem with react-bootstrap-table v3. Can you tell us how you solved the problem ?

[AllenFang]

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

[kimiyang]

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