マテリアル UI のテーブル ヘッダー セル間の垂直方向のギャップを回避するにはどうすればよいですか?

Question

MUI テーブルのヘッダー セル間に垂直方向のギャップが存在します。それらを取り除くにはどうすればよいでしょうか?

以下は、codesandbox でのエラーの再現です。 https://codesandbox.io/s/mui-material-table-sticky-header-forked-euilo3?file=/tsconfig.json

スタイルを適用してみました:

border: "なし"、
    borderCollapse: "折りたたむ",
    マージン: 0、
このエラーは、特定の解像度で表をスクロールするときにのみ発生します。

Answer 1

要素を検査すると、th 要素と td 要素に padding: 6px 16px; が表示されます。したがって、追加のギャップはヘッダー セルと行セルの両方に適用されるため、実際には正しいです。

padding:0 または任意の値を設定するだけで、ヘッダー セルのギャップを変更できます: リーリー

ただし、行セルの位置を揃えるためには、行セルに対しても同じことを行う必要があります。