How to avoid vertical gaps between table header cells in Material UI?
P粉262113569
P粉262113569 2023-09-05 19:52:46
0
1
503
<p>Vertical gaps exist between header cells in MUI tables. How to get rid of them? </p> <p>The following is a reproduction of the error in codesandbox: https://codesandbox.io/s/mui-material-table-sticky-header-forked-euilo3?file=/tsconfig.json</p> <p>I tried applying a style: </p> <pre class="brush:php;toolbar:false;">border: "none", borderCollapse: "collapse", margin: 0,</pre> <p>This error only occurs at certain resolutions and when scrolling the table. </p>
P粉262113569
P粉262113569

reply all(1)
P粉529245050

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.

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template