使用react-bootstrap-table宽度时出现问题

Question

我使用react-bootstrap-table并需要垂直滚动。 我的代码：

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

此代码工作正常，我得到自动宽度可调整大小的表。 之后，我添加了下一个键：

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

并解决了100% width的问题，而不是调整表格宽度，我得到了一个更多的滚动，如下图所示：

我该如何解决这个问题？

Answer 1

我也打开了issue，图书馆的创建者建议了解决方案：

  

您必须在printable

上添加BootstrapTable密钥

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

Answer 2

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

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

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

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

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

componentWillUpdate很快就会消失，但现在它运作正常。