减少脉轮表中列之间的空白

ABC*_*ABC 3 javascript css whitespace reactjs chakra-ui

我正在创建一个基本的小Tablein chakra-ui,但是列之间的空白对于我的特定用例来说太多了。我已经设置了size="sm",但空白仍然太多。

在此输入图像描述

我们怎样才能做到这一点?这是与我的问题相对应的伪代码摘要片段:

<Table size="sm">
  <Thead>
    // ...
  </Thead>
  <Tbody>
    //...
  </Tbody>
</Table>
Run Code Online (Sandbox Code Playgroud)

这是codesandbox中完整的示例: https://codesandbox.io/s/responsive-table-forked-ut904? file=/src/ResponsiveTable.tsx:196-344

Vie*_*iet 5

您只需添加 css 来覆盖 Table 的 css:

<Table size="small" className="table-tiny" />
Run Code Online (Sandbox Code Playgroud)

并在CSS中:

.table-tiny th,
.table-tiny td {
  padding-left: 4px;
  padding-right: 4px;
}
Run Code Online (Sandbox Code Playgroud)

https://codesandbox.io/s/responsive-table-forked-8683s?file=/src/ResponsiveTable.tsx