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

Question

There are vertical gaps between header cells in MUI tables. How to get rid of them? Here is a reproduction of the error in codesandbox: https://codesandbox.io/s/mui-material-table-sticky-header-forked-euilo3?file=/tsconfig.json I try to apply the style: border:"none", borderCollapse:"collapses

P粉529245050 · Answer

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.