4

I use react-bootstrap-table and need the vertical scroll. My code:

<BootstrapTable data={products} hover>
      <TableHeaderColumn isKey dataField='id' width='10%'>
          Product ID
      </TableHeaderColumn>
      <TableHeaderColumn dataField='name'>
          Product Name
      </TableHeaderColumn>
      <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
</BootstrapTable>

This code works fine and I get the auto width resizable table. After that, I added next key: 

<BootstrapTable data={products} hover height='200px'>

and got the problem with 100% width, instead of resizing table width I got one more scroll like in the picture below:

enter image description here How can I fix this?

4

2 回答 2

3

我还打开了问题，图书馆的创建者建议了解决方案：

您必须添加printable密钥BootstrapTable

另外，我也加bodyStyle={{overflow: 'overlay'}}了BootstrapTable。

于 2017-09-06T14:06:16.970 回答
1

只是想在此处添加此内容，因为我花了很多时间试图弄清楚在使用扩展行时如何修复错位。

所有这些仅适用于表格具有垂直滚动条的情况。

我有一个独特的问题，因为我有一个影响表格宽度的可折叠侧边栏。当侧边栏折叠并展开行时，表格会自动调整列宽。当我重新折叠侧边栏时，表格太宽并导致水平滚动条。除此之外，每次用户展开一行时，表格都会重新计算列宽。

我的解决方案是在渲染期间摆脱垂直滚动条：

componentWillUpdate(){
    document.querySelector('.react-bs-table-container').style.height = "auto"
}
componentDidUpdate(){
    document.querySelector('.react-bs-table-container').style.height = "100%"
}

componentWillUpdate 即将消失，但目前它运行良好。

于 2018-05-14T05:57:55.207 回答