react-bootstrap-table 宽度有问题

Posted 2023-03-05

【中文标题】react-bootstrap-table 宽度有问题

【英文标题】：Trouble with react-bootstrap-table width

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

我该如何解决这个问题？

【参考方案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'。