Reduce whitespace between columns in a chakra Table

user_11970350 0
Viewed 2634

I'm creating a basic small Table in chakra-ui, however the whitespace between columns is too much for my particular use case. I've set size="sm" but it's still too much whitespace.

enter image description here

How can we achieve this? Here's a summary snippet of pseudo-code corresponding to my problem:

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

Here's the full worked example in codesandbox: https://codesandbox.io/s/responsive-table-forked-ut904?file=/src/ResponsiveTable.tsx:196-344

chakra-ui reactjs whitespace css javascript
2 Answers
user_61083900

Just Override this sass this will make less padding of table cell

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

user_77682180
Related