react-bootstrap-table 宽度有问题答案

【问题标题】：Trouble with react-bootstrap-table widthreact-bootstrap-table 宽度有问题
【发布时间】：2018-02-10 17:00:54
【问题描述】：

我使用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 的问题，我没有调整表格宽度，而是得到了一个如下图所示的滚动条：

我该如何解决这个问题？

【问题讨论】：

标签： html css twitter-bootstrap reactjs react-bootstrap-table

【解决方案1】：

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

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

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

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

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

componentWillUpdate 即将停用，但目前它运行良好。

【讨论】：

【解决方案2】：

我还打开了issue，图书馆的创建者提出了解决方案：

您必须在BootstrapTable 上添加printable 键

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

【讨论】：