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.

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: =/src/ResponsiveTable.tsx:196-344

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.

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

• javascript
• css
• reactjs
• whitespace
• chakra-ui

Share Improve this question Follow asked Jul 24, 2021 at 3:54 ABCABC 78311 gold badge1212 silver badges2828 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

You just to add css to override css of Table:

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

and in 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