Antd中指定宽度（表格列）的单位？

Question

我们正在使用Antd 的最新稳定版本 2（由于版本依赖性限制，无法跳转到版本 3）。我们如何指定表格列的宽度，最好是title 属性中文本的长度？根据official table component docu，column 有明显的属性width。所有的英文文档都是

属性：宽度

说明：此列的宽度

类型： string|number

默认值： -

问题的第一部分：如果我只指定一个数字，使用什么单位？我尝试了不同的东西，但它看起来并不像 dp 所描述的那样，例如 @ 987654323@

第二部分：如果我指定一个字符串，我可以使用哪些单位？我尝试了ex、em 和px，但它们似乎都不起作用。

问题的第三部分：也许我们忽略了table 标记的一个属性，它覆盖或限制了width 的使用是一个列？

感谢您的任何意见，将原始文档翻译成英文已经会有所帮助。或者解释一个相关的Github issue: 'how to set table columns width? the width property is invalid'。

提前感谢您的时间 - 一个困惑的 Antd 新手。

Answer 1

来自antd官方文档：

import { Table } from 'antd';

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  key: 'name',
  width: '40%',
}, {
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
  width: '30%',
}, {
  title: 'Address',
  dataIndex: 'address',
  key: 'address',
}];

const data = [{
  key: 1,
  name: 'John Brown sr.',
  age: 60,
  address: 'New York No. 1 Lake Park',
  children: [{
    key: 11,
    name: 'John Brown',
    age: 42,
    address: 'New York No. 2 Lake Park',
  }, {
    key: 12,
    name: 'John Brown jr.',
    age: 30,
    address: 'New York No. 3 Lake Park',
    children: [{
      key: 121,
      name: 'Jimmy Brown',
      age: 16,
      address: 'New York No. 3 Lake Park',
    }],
  }, {
    key: 13,
    name: 'Jim Green sr.',
    age: 72,
    address: 'London No. 1 Lake Park',
    children: [{
      key: 131,
      name: 'Jim Green',
      age: 42,
      address: 'London No. 2 Lake Park',
      children: [{
        key: 1311,
        name: 'Jim Green jr.',
        age: 25,
        address: 'London No. 3 Lake Park',
      }, {
        key: 1312,
        name: 'Jimmy Green sr.',
        age: 18,
        address: 'London No. 4 Lake Park',
      }],
    }],
  }],
}, {
  key: 2,
  name: 'Joe Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park',
}];

// rowSelection objects indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  onSelect: (record, selected, selectedRows) => {
    console.log(record, selected, selectedRows);
  },
  onSelectAll: (selected, selectedRows, changeRows) => {
    console.log(selected, selectedRows, changeRows);
  },
};

ReactDOM.render(
  <Table columns={columns} rowSelection={rowSelection} dataSource={data} />
, mountNode);