小编Gab*_*ger的帖子

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

我使用 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>

        ...
Run Code Online (Sandbox Code Playgroud)

显示表格的屏幕截图

css user-interface reactjs chakra-ui

3
推荐指数
1
解决办法
3494
查看次数

标签 统计

chakra-ui ×1

css ×1

reactjs ×1

user-interface ×1