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>

这段代码运行得很好，我得到了自动宽度可调整大小的表。在那之后，我添加了next键：

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

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

​

我该如何解决这个问题呢？

Answer 1

我还打开了issue，库的创建者给出了解决方案：

您必须在BootstrapTable上添加printable密钥

此外，我还在BootstrapTable上添加了bodyStyle={{overflow: 'overlay'}}。

Answer 2

我之所以想在这里添加这一点，是因为我花了大量时间试图弄清楚在使用扩展行时如何修复未对齐的问题。

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

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

我的解决方案是在渲染时去掉垂直滚动条：

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

componentWillUpdate很快就会消失，但就目前而言，它工作得很完美。