Content column lines didn't align with the title column lines in IE

[liqili]

Hi,
I found that content column lines didn't align with the title column lines in IE11.

[NullDivision]

Also reproduced on Chrome with v1.4.3

[AllenFang]

@liqili and @NullDivision, did you assign width on any columns?

[NullDivision]

Tried that. No dice.

[AllenFang]

@NullDivision, can you help to dont set the width and test it again? and what version did you used?

[liqili]

Hi AllenFang,
I didn't set any width.

[AllenFang]

any horizontal bar in your table? I test it on IE 11.09600, it's fine

[anthonypaparella]

@AllenFang +1 was able to reproduce

"react-bootstrap-table": "^1.4.5"
on Chrome Version 47.0.2526.106 (64-bit)
using react-bootstrap-table.css

<BootstrapTable` data={this.props.list} pagination={true} search={true}>
        <TableHeaderColumn isKey={true} dataSort={true} dataFormat={buildLink} dataField="po_id">PO ID</TableHeaderColumn>
        <TableHeaderColumn dataSort={true} dataField="po_number" hidden={true}>PO Number</TableHeaderColumn>
        <TableHeaderColumn dataSort={true} dataField="created_at">created_at</TableHeaderColumn>
        <TableHeaderColumn dataSort={true} dataField="fulfillment_status">fulfillment_status</TableHeaderColumn>
        <TableHeaderColumn dataSort={true} dataField="po_date">po_date</TableHeaderColumn>
        <TableHeaderColumn dataSort={true} dataField="vendor_name">vendor_name</TableHeaderColumn>
        <TableHeaderColumn dataSort={true} dataField="warehouse">warehouse</TableHeaderColumn
</BootstrapTable>

Width attribute seems to have no effect on column size for me either. Any Ideas?

[AllenFang]

I've planed to design a new bootstrap table to solve the width and align problem. need some time.

[jochenberger]

I've created a Fiddle to demonstrate the issue: https://jsfiddle.net/8huu795c/, this happens if the table is wide enough so that scroll bars are created.

[jochenberger]

I updated the fiddle so it works with Chrome. https://jsfiddle.net/8huu795c/1/
Btw, the column widths are fine in Chromium, but they are off in Firefox.

[jochenberger]

If I set min-width on the ths in addition to width and max-width, the rows are aligned properly in Firefox.

[AllenFang]

@jochenberger, thanks your example, I'll take care about this on my new plan 👍

[AllenFang]

Dear all, v2.0.0 has been released, you can check #331 for more detail explanation and I'll close this issues, if problem still remain, please tell me on #331 or open an issue