How to avoid vertical gaps between table header cells in Material UI?

Question

Vertical gaps exist between header cells in MUI tables. How to get rid of them?

The following is a reproduction of the error in codesandbox: https://codesandbox.io/s/mui-material-table-sticky-header-forked-euilo3?file=/tsconfig.json

I tried applying a style:

border: "none",
    borderCollapse: "collapse",
    margin: 0,

This error only occurs at certain resolutions and when scrolling the table.

Answer 1

When inspecting the elements, I can see padding: 6px 16px; on the th and td elements. So the extra gap is actually correct as it is applied to both header cells and row cells

You can change the header cell gap by just setting padding:0 or any value:

 border: "none",
 borderCollapse: "collapse",
 margin: 0,
 padding: 0,

But you must also do the same with the row cells to keep them aligned.