如何避免材料 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,

但是您还必须对行单元格执行相同的操作以保持它们对齐。