react-bootstrap-table2 单元格单击时列宽变化

Question

我有基础反应-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'})}
            />
        )
    }
}

我的问题是，当我单击 editable 单元格时，列的宽度发生了变化。我在现场演示中看到这是阻止这种效果的方法。 live demo

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

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

Answer 1

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

Answer 2

我能够通过为 table 中的每一列使用样式道具来解决这个问题。具体来说，我添加了以下道具：

editorStyle: {width:'100%', overflow:'scroll', padding:'inherit', height:'inherit'},
style: {width:'20%'}

为了得出 20% 的宽度，我不得不花点时间。我的 table 有超过 5 列，我发现所有列的总宽度总和超过 100% 使我的列看起来很漂亮，而且在编辑时不会展开。

react-bootstrap-table2 单元格单击时列宽变化

react-bootstrap-table2 column width change on cell click

reactjs

react-table