Headers don't resize with rows

Question

I have a react-bootstrap-table like that:

<div>
    <BootstrapTable data={this.state.results} striped hover condensed options={this.options}>
      <TableHeaderColumn dataField="VERSION" isKey={true} dataSort={true}>Version</TableHeaderColumn>
      <TableHeaderColumn dataField="DATASTAMP">Data</TableHeaderColumn>
    </BootstrapTable>
</div>

When I load data to my table and my rows get a long sentence or more info than row expected my table got horizontal scrollbar. I haven't problem with that, I will handle it later, but my headers are still the same size and do not fit to my table. Maybe you know solution for that?

Answer 1

Did you add react bootstrap table styles?

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