Wie vermeide ich vertikale Lücken zwischen Tabellenkopfzellen in der Material-Benutzeroberfläche?

Question

In MUI-Tabellen bestehen vertikale Lücken zwischen den Kopfzellen. Wie wird man sie los?

Das Folgende ist eine Reproduktion des Fehlers in codesandbox: https://codesandbox.io/s/mui-material-table-sticky-header-forked-euilo3?file=/tsconfig.json

Ich habe versucht, einen Stil anzuwenden:

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

Dieser Fehler tritt nur bei bestimmten Auflösungen und beim Scrollen der Tabelle auf.

Answer 1

检查元素时，我可以在 th 和 td 元素上看到 padding: 6px 16px;。因此，额外的间隙实际上是正确的，因为它同时应用于标题单元格和行单元格

您只需设置 padding:0 或任何值即可更改标题单元格间隙：

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

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