如何在 ant design Table 的行之间添加空格?

问题描述 投票:0回答:1

我有一个可扩展的 antd 表,所以我想在行之间添加一些垂直空间。

我尝试了名为

rowClassName
的 antd 表属性,但它不起作用。我也尝试添加自定义组件,但它也不起作用。 从 antd 导入的表,我在 ant design table api 部分没有找到任何属性来添加 ant design 表行之间的行间距。 任何建议都会有帮助的。谢谢。 这是我的代码:

```
<Table
        rowClassName={rowClassName}
        scroll={undefined}
        showHeader={false}
        expandable={{
          expandedRowClassName: (_, index) => `${index}`,
          expandedRowRender,
          expandRowByClick: true,
          showExpandColumn: false,
          expandedRowKeys: expandedRowKeys,
          onExpandedRowsChange: handleChangeExpandedRowKeys,
        }}>
        <Column
          title={t('fullName')}
          dataIndex="fullName"
          render={_renderFullName}
          className=" rounded-tl-xl rounded-bl-xl !mb-4 -mr-4"
        />
        <Column
          filterDropdownVisible={false}
          dataIndex="actions"
          className=" rounded-tr-xl rounded-tl-xl !mb-4 -mr-4"
          width={60}
          align="center"
          fixed="right"
          render={(_, lead) =>
            expandedRowKeys?.includes(lead?.id) ? (
              <TopIcon className="topIcon" />
            ) : (
              <BottomIcon className="bottomIcon" />
            )
          }
        />
      </Table>```

javascript reactjs next.js antd ant-design-pro
1个回答
0
投票

您可以在表格道具中指定 size="small"

 <Table columns={columns} dataSource={data} size="small" />

© www.soinside.com 2019 - 2024. All rights reserved.