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

问题描述

我在 guard let index = self.pendingFriendUsers.firstIndex(where: { $0.uid == otherUserUID }) else { return } //get the index of the matching UID self.pendingFriendUsers[index].isFriends = 1 //modify the item at that index 中创建了一个基本的小 Table，但是列之间的空白对于我的特定用例来说太多了。我已经设置了 chakra-ui 但它仍然有太多的空白。

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

size="sm"

这是在代码沙盒中的完整工作示例： https://codesandbox.io/s/responsive-table-forked-ut904?file=/src/ResponsiveTable.tsx:196-344

解决方法

只需覆盖这个 sass 这将减少表格单元格的填充

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

,

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

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

在 css 中：

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

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