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>

这段代码工作正常，我得到了自动调整宽度 table。之后，我添加了下一个键：

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

100% width 出现问题，我没有调整 table 宽度，而是多了一个卷轴，如下图所示：

我该如何解决这个问题？

Answer 1

我也打开了 issue 并且库的创建者建议了解决方案：

You have to add printable key on BootstrapTable

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

Answer 2

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

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

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

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

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

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

react-bootstrap-table 宽度有问题

Trouble with react-bootstrap-table width

html

css

twitter-bootstrap

reactjs

react-bootstrap-table