How to put space between rows in a Chakra UI table

Viewed 114

I created a table using ChakraUI, but I wanted to put a space between the rows to give a nice spacing, I already tried using margin and padding but at least as I tried I couldn't.

<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>

        ...

Screenshot showing table

1 Answers

You can use border-collapse: separate and borderSpacing to separate rows on a native <table> element:

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