css - react-bootstrap-table - 格式化 - 行高，文本换行

Question

我正在使用 react-bootstrap-table，我在格式化它时遇到了问题。主要问题是:

• 名称较长的 header 应显示为两行文本，而不是如下图所示的一行和“...”:

• 此外，我无法设置表格单行的高度。每个文本都有很大的填充，因此表格不会太紧凑:

代码在这里:

<BootstrapTable
   data={this.props.sales}
   version="4"
   striped
   hover
   pagination
   keyField="Type"
>
  {tableHeaders.map((header, index) => (
     <TableHeaderColumn key={index} dataField={header.id} style={{ height: 10 }}>
        {header.name}
     </TableHeaderColumn>
  ))}
</BootstrapTable>

Answer 1

根据 docs您可以进行所需的所有自定义。

第一个问题:要删除点，您可以使用 thStyle 属性，您可以将其传递给 TableHeaderColumn 组件并覆盖 CSS white-空间属性。

<TableHeaderColumn thStyle={{ whiteSpace: 'normal' }} {...anotherProps} />

第二个问题:您可以使用 trClassName 属性处理行的高度。您可以传递字符串或函数来处理每个或使条件类取决于行。查看更多here .

例如:

<BootstrapTable trClassName="customClass" {...anotherProps} />

并定义您的customClass:

.customClass {
    // override padding or height whatever you want 
    padding: 3px;
}

祝你好运，玩得开心!