How to avoid vertical gaps between table header cells in Material UI?
P粉262113569
2023-09-05 19:52:46
<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>
When inspecting the elements, I can see
padding: 6px 16px;
on theth
andtd
elements. So the extra gap is actually correct as it is applied to both header cells and row cellsYou can change the header cell gap by just setting
padding:0
or any value:But you must also do the same with the row cells to keep them aligned.