react-bootstrap-table 自动列宽答案

【问题标题】：react-bootstrap-table auto column widthreact-bootstrap-table 自动列宽
【发布时间】：2020-02-12 09:26:32
【问题描述】：

我正在使用“react-bootstrap-table”来渲染表格。某些列的文本很长，其中省略号。我设置了宽度=“一些数字”。我想将宽度设置为动态或列应该按照文本的长度。有什么方法可以在不计算文本长度的情况下自动设置宽度，或者我们可以包装文本并删除省略号吗？

这是我的代码

<BootstrapTable
          data={products}
          pagination
          options={options}
          striped
          hover
          search
        >


          <TableHeaderColumn width="170" dataField="a1" dataSort columnTitle>some text</TableHeaderColumn>

          // Here i have set widht manually as '  width="160" '
          <TableHeaderColumn width="160" dataField="a2" dataSort columnTitle>some text</TableHeaderColumn>

          <TableHeaderColumn width="140" dataField="a3" dataSort>some text</TableHeaderColumn>


        </BootstrapTable>

【问题讨论】：

有一种方法可以在 react-table 中设置固定值。不知道它对你有用。 npm 库“react-table-hoc-fixed-columns”；或者您可以为此类问题添加工具提示
@Oshini 谢谢，但我不想设置固定宽度它应该是动态的
好的，然后试试百分比。示例：width="10%"
github.com/AllenFang/react-bootstrap-table/issues/910
@Oshini 我检查了这个 tdStyle={{ whiteSpace: 'normal', wordWrap: 'break-word' }} 它工作正常

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

【解决方案1】：

您可以指定一些宽度并使用tdStyle 来实现您想要的：

<TableHeaderColumn 
  dataField='name'
  width="200" 
  tdStyle={{ whiteSpace: 'normal', wordWrap: 'break-word' }}
>
    Product Name
</TableHeaderColumn>

【讨论】：