Que dois-je faire si thead et td ne peuvent pas être alignés ?

Lors de l'utilisation de la fonction Afficher/Masquer la colonne dans la barre d'outils, il arrive souvent que les en-têtes de colonne du tableau ne puissent pas être alignés avec le contenu.

J'ai trouvé deux méthodes de traitement sur Internet, comme suit :

1 Supprimez la hauteur en option et obtenez un alignement parfait, mais quand. il y a beaucoup de données, le tableau augmentera automatiquement la hauteur et affichera toutes les données sans afficher les barres de défilement.

2. Commentez les deux lignes suivantes

//this.resetHeader();
//padding += this.$header.outerHeight();

Elles seront parfaitement alignées, mais cela rendra impossible le gel de l'en-tête du tableau.

Ces deux résultats ne peuvent pas avoir le gâteau et le manger aussi, et les fonctions affectées sont également très souhaitables.

La cause suspectée du problème devrait être que pendant le processus de réduction des colonnes, la largeur des colonnes restantes est définie, mais il y a un problème de calcul lorsque la largeur restante est remplie après la réduction des colonnes.

Finalement j'ai adopté la méthode suivante pour votre référence :

Ne définissez pas la largeur d'une des colonnes pour le rendre Remplissage automatique, le code suivant

        <thead><tr><th data-field="Code" data-width="105px">编号</th><th data-field="Name" data-switchable="false">姓名</th><th data-field="Sex" data-width="120px">性别</th><th data-field="Age" data-width="120px">年龄</th><th data-field="School" data-width="30px">学校</th></tr></thead>

De cette façon, tant que le nom n'est pas supprimé, il n'y aura pas de problème d'alignement lors de la suppression d'autres colonnes Dans l'ordre. pour éviter que cette colonne ne soit supprimée, ajoutez data-switchable="false"

Dans les affaires normales, il y a souvent des colonnes qui nécessitent un remplissage automatique de la largeur, ce qui est une meilleure solution.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!