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

Question

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

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

<Table size="sm">
  <Thead>
    // ...
  </Thead>
  <Tbody>
    //...
  </Tbody>
</Table>

Answer 1

只需覆盖此 sass 这将减少 table 单元格的填充

.css-vooc0a {
  padding-inline-start: var(--chakra-space-1);
  padding-inline-end: var(--chakra-space-1);
  text-align: center;
}

Answer 2

您只需添加 css 即可覆盖 Table 的 css:

<Table size="small" className="table-tiny" />

在css中：

.table-tiny th,
.table-tiny td {
  padding-left: 4px;
  padding-right: 4px;
}

Reduce whitespace between columns in a chakra Table