如何让react-bootstrap-table-next在所有分辨率下保持列宽不变且移动端可滚动

问题原因 #

列宽被挤压缩小是因为未给所有列明确最小宽度，且表格没有外层滚动容器兜底，小屏下浏览器会自动压缩列宽适配容器宽度。

解决步骤 #

1. 给所有列配置最小宽度

不要只给单独列设置宽度，给每一列都加上minWidth属性，避免内容被挤压：

columns = [
  {
    text: "Item",
    dataField: "item",
    key: "item",
    editable: false,
    style: {
      width:"15vw",
      minWidth: "200px" // 新增最小宽度，适配下拉框的展示需求
    },
    formatter: (cellContent, row, rowIndex) => {
      let data = row
      console.log('row data ---> ', data)
      return (<Select
        defaultValue={data.item ? data.item : "Select..."}
        options={catalogue}
        styles={customStyles}
        name="items"
        value={this.state.selectedItem[rowIndex]}
        onChange={(event) => this.onItemSelected(event, rowIndex, 'item')}
      />)
    }
  },
  {
    text: "Unit Price",
    dataField: "unitPrice",
    key: "unitPrice",
    align: "right",
    style: { minWidth: "120px" } // 新增
  },
  {
    text: "Quantity",
    dataField: "quantity",
    key: "quantity",
    align: "right",
    style: { minWidth: "100px" } // 新增
  },
  {
    text: "Amount",
    dataField: "amount",
    key: "amount",
    editable: false,
    align: "right",
    style: { minWidth: "120px" } // 新增
  },
  {
    text: <Icon name="edit" />,
    dataField: "action",
    isDummyField: true,
    editable: false,
    style: { minWidth: "80px" }, // 新增
    formatter: (cellContent, row, rowIndex) => {
      return (<Icon name="trash" style={{ cursor: "pointer" }} onClick={() => this.deleteRow(rowIndex)} />)
    }
  }
];

2. 给表格外层加滚动容器，配置表格最小总宽度

外层容器设置横向滚动，表格设置最小总宽度（等于所有列最小宽度之和即可），保证小屏下不会挤压列宽，直接触发横向滚动：

// 外层套div实现滚动
<div style={{ width: '100%', overflowX: 'auto' }}>
  <BootstrapTable
    keyField="index"
    data={this.state.dataSource}
    columns={columns}
    // 表格宽度占满全屏，最小总宽度设为620px（和上面所有列minWidth总和匹配即可，可自行调整）
    tableStyle={{ width: '100%', minWidth: '620px' }}
  />
</div>

注意事项 #

• 最小宽度的数值可以根据你实际的内容展示需求调整，只要保证所有列的最小宽度加起来等于表格的minWidth即可
• 不要额外给表格设置table-layout: fixed，否则容易出现单元格内容溢出的问题

内容的提问来源于stack exchange，提问作者Sachin Prasanna.M.L