react-bootstrap-table2单元格单击时的列宽更改

Question

我有基本的react-bootstrap-table代码：

import React from 'react'
import BootstrapTable from 'react-bootstrap-table-next';
import cellEditFactory from 'react-bootstrap-table2-editor';

const products = [
  {
    id: "0",
    name: "test",
    price: "2100"
  },
  {
    id: "1",
    name: "test",
    price: "2100"
  },
  {
    id: "2",
    name: "test",
    price: "2120"
  }
];

const columns = [
  {
    dataField: "id",
    text: "Product ID"
  },
  {
    dataField: "name",
    text: "Product Name",
  },
  {
    dataField: "price",
    text: "Product Price"
  }
];
export default class App extends React.Component {

    render() {
        return (
            <BootstrapTable
            keyField="id"
            data={ products }
            columns={ columns }
            cellEdit={ cellEditFactory({mode: 'click'})}
            />
        )
    }
}

我的问题是，当我单击可编辑单元格时，列会更改宽度。我在现场演示中看到了阻止这种效果的方法。 live demo

我尝试通过添加具有最大宽度的css来避免这种效果，但这不是问题单元格，而是整列：

editorStyle: {
    backgroundColor: '#20B2AA',
    maxWidth: '30%',
},

Answer 1

您需要添加.table {table-layout: 'fixed'}。