如何避免材料 UI 中表格標題單元格之間的垂直間隙？

Question

MUI 表格中的標題儲存格之間存在垂直間隙。如何擺脫它們？

以下是codesandbox中錯誤的重現： https://codesandbox.io/s/mui-material-table-sticky-header-forked-euilo3?file=/tsconfig.json

我嘗試套用樣式：

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

該錯誤僅在某些解析度下以及捲動表格時出現。

Answer 1

檢查元素時，我可以在 th 和 td 元素上看到 padding: 6px 16px;。因此，額外的間隙實際上是正確的，因為它同時應用於標題單元格和行單元格

您只需設定 padding:0 或任何值即可變更標題儲存格間隙：

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

但是您還必須對行單元格執行相同的操作以保持它們對齊。