对齐 ant 设计表的列和行

Question

我正在使用 ant 设计表列出我的数据，但列向​​右对齐，默认情况下，所有列的标题都应向左对齐。这是图片的链接：Ant design table alignment issue。

有些标题是由小宽度引起的，但它们是可调整的。问题是标题向右对齐，第 1 列除外，它是 Round。

这是我的代码：

const tableColumns = [
        {
            title: 'Round',
            dataIndex: 'round',
            width: 80,
        },
        {
            title: 'Date',
            dataIndex: 'date',
            width: 100,
        },
        {
            title: 'Price',
            dataIndex: 'price',
            width: 70,
        },
        {
            title: 'Raise Size',
            dataIndex: 'raiseSize',
            width: 100,
        },
        {
            title: 'Amount',
            dataIndex: 'amount',
            width: 100,
        },
        {
            title: 'Market Cap',
            dataIndex: 'marketCap',
            width: 50,
        },
        {
            title: 'Max Allocation',
            dataIndex: 'maxAllocation',
            width: 50,
        },
        {
            title: 'Filled',
            dataIndex: 'filled',
            width: 100,
        },
        {
            title: 'Status',
            dataIndex: 'status',
            width: 100,
        },
        {
            title: 'Yield',
            dataIndex: 'yieldPer',
            width: 100,
        },
    ];

    const tableData = [
        {
          round: "Round 1",
          date: "10-10-2021",
          price: '0.05 USDC',
          raiseSize: "1000000 SHI",
          amount: "25M",
          marketCap:"10M",
          maxAllocation: "10M",
          filled: "1379%",
          status: "Filled",
          yieldPer:"+223%"
        },
        {
          round: "Round 2",
          date: "17-10-2021",
          price: '0.10 USDC',
          raiseSize: "1000000 SHI",
          amount: "25M",
          marketCap:"20M",
          maxAllocation: "10M",
          filled: "1579%",
          status: "Filled",
          yieldPer:"+203%"
        },
        {
          round: "Round 3",
          date: "28-10-2021",
          price: '0.15 USDC',
          raiseSize: "1000000 SHI",
          amount: "25M",
          marketCap:"30M",
          maxAllocation: "10M",
          filled: "1379%",
          status: "Upcoming",
          yieldPer:""
        },
      ];

这是我使用表格的地方：

<Table style={{marginTop:'20px'}} columns={tableColumns} dataSource={tableData} align='center' size="middle" />

Answer 1

看起来align property for Column 是您正在寻找的东西：

const tableColumns = [
        {
            title: 'Round',
            dataIndex: 'round',
            width: 80,
        },
        {
            title: 'Date',
            align: 'right', // <--- this way
            dataIndex: 'date',
            width: 100,
        },
...