Aligner deux tables avec jQuery - jquery, asp.net, html, css

J'ai un énorme gridview dans un conteneur à défilementavec une hauteur fixe. Je ne voulais pas que l'en-tête défile alors j'ai ajouté l'en-tête dans une section différente. Donc, fondamentalement, j'ai deux tables, une à l'intérieur du support et une à l'extérieur, mais je veux que les deux aient les mêmes dimensions de colonne afin qu'elles s'alignent.

Comment puis-je accomplir cela? "Je préférerais ne rien fixer de taille fixe, et je veux absolument ajouter la colonne d’en-tête de la grille de visualisation parce que si je change de grille, je veux que l’en-tête soit modifié.

Réponses:

Vous pouvez essayer quelque chose comme ça. Construis d'abord ta table avec l'en-tête de la table. Ensuite, lorsque le document est prêt, utilisez jQuery pour cloner l'en-tête de la table, supprimez l'en-tête existant, puis placez la copie clonée dans l'autre table. Vous n’avez peut-être pas besoin de définir des largeurs dans ce cas, mais vous pouvez également obtenir la largeur des colonnes de la table originale et appliquer ces largeurs à la table ajoutée (celle avec la ligne d’en-tête).

Si les colonnes de votre table de contenu changent de largeur, vous devrez obtenir la largeur de toutes les colonnes et les appliquer à la cellule d’en-tête de la table correspondante.

Vous pouvez sélectionner les deux tables et les rendre égales en hauteur.

var height = $("#object1").outerHeight();
$("#object2").height( height );

or shorter: $("#object2").height( $("#object1").outerHeight() );

Où object1 est l'identifiant de votre grande table et object2 est l'identifiant de votre petite table.