Comment éviter les espaces verticaux entre les cellules d’en-tête du tableau dans Material UI ?

Question

Des espaces verticaux existent entre les cellules d’en-tête dans les tableaux MUI. Comment se débarrasser d'eux?

Ce qui suit est une reproduction de l'erreur dans codesandbox : https://codesandbox.io/s/mui-material-table-sticky-header-forked-euilo3?file=/tsconfig.json

J'ai essayé d'appliquer un style :

border: "aucun",
    borderCollapse : "réduire",
    marge : 0,

Cette erreur ne se produit qu'à certaines résolutions et lors du défilement du tableau.

Answer 1

Lors de l'inspection d'un élément, je peux th 和 td 元素上看到 padding: 6px 16px;. L’espace supplémentaire est donc correct car il est appliqué à la fois aux cellules d’en-tête et aux cellules de ligne

Vous pouvez modifier l'espacement des cellules d'en-tête en définissant simplement padding:0 ou n'importe quelle valeur :

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

Mais vous devez également faire de même avec les cellules des lignes pour les maintenir alignées.