css - 如何在 Chakra UI 表中的行之间放置空格

Question

我使用 ChakraUI 创建了一个表格，但我想在行之间放置一个空格以提供合适的间距，我已经尝试过使用边距和填充，但至少在我尝试时我做不到。

<TableContainer mx="9.8rem">
    <Table variant="unstyled" maxWidth="100%">
        <Thead>
            <Tr>
                <Th color={theme.text.mono} pl="5">
                    Asset
                </Th>
                <Th color={theme.text.mono}>Price</Th>
                <Th color={theme.text.mono}>Balance</Th>
                <Th color={theme.text.mono}>Value</Th>
            </Tr>
        </Thead>
        <Tbody bgColor={theme.bg.blueNavy}>
            <Tr>
                <Td
                    borderLeftRadius="0.75rem"
                    fontSize="sm"
                    fontWeight="bold"
                    pl="4"
                >
                    <Flex flexDirection="row" alignItems="center" gap="2">
                        <Image src="icons/syscoin-logo.png" w="8" h="8" alt="Asset" />
                        <Text>SYS</Text>
                    </Flex>
                </Td>
                <Td fontSize="sm">$1,043.27</Td>
                <Td fontSize="sm">0.0000554448</Td>
                <Td fontSize="sm" borderRightRadius="0.75rem">
                    $0.06
                </Td>
            </Tr>

        ...

Answer 1

您可以使用 border-collapse: separate和 borderSpacing在 native 上分隔行 <table>元素:

<Table style={{borderCollapse:"separate", borderSpacing:"0 1em"}}>