J'ai trouvé plusieurs façons de l'accomplir jusqu'à présent, mais aucun d'entre eux ne supporte une THELA avec plusieurs rangées de table. J'ai essayé l'affichage : bloquer avec Overflow: auto mais qui ne prend pas également en charge plusieurs lignes de table avec rowspam et colspam < / code>. Ce codepen https://codepen.io/ariona/pen/lnqxnk est exactement ce que je suis Vous recherchez, mais je n'ai aucune idée de la façon dont JQuery travaille et je suis donc incapable de comprendre ce qui se passe. Est-ce que quelqu'un sait s'il est possible d'accomplir cela avec Vanilla JavaScript?
3 Réponses :
Regardez le HTML du Codepen. Il est possible de créer le même arborescence DOM avec document.Createelement () code> et document.AppendChild () code>. Créez et appendez les éléments un par un. Utilisez les mêmes rangées et colspan comme prévu dans l'exemple. Pour définir des rangées, changez l'attribut du même nom. ...
const thead = document.createElement(`thead`);
table.appendChild(thead);
const tr = document.createElement(`tr`);
thead.appendChild(tr);
const th = document.createElement(`th`);
th.rowspan = 2;
tr.appendChild(th );
etc with each th ...
Hey, merci pour votre réponse. Cependant, je pense que je ne suis peut-être pas clair. Je n'essaie pas de recréer la table à l'aide de JS. J'essaie de coller le THEAD en haut chaque fois que l'utilisateur fait défiler l'utilisateur. Par exemple, essayez de faire défiler le codepen.
Il ne nécessite pas de JS, seul CSS
ajoutez ceci au sélecteur THEAD: P>
position sticky top 0 background white
J'ai modifié le Codepen que vous avez lié pour simplement utiliser CSS pour rendre l'en-tête collant: https://codepen.io/anon/pen/loxpnj
C'est tout ce que vous Besoin: