Il était difficile de décrire exhaustivement ma question dans le titre, donc je vais essayer d'être plus clair dans la description. Je construis une table en utilisant <div>
et en appliquant les propriétés CSS display: table
etc. en évitant l'approche sémantique <table>
à dessein. Tout fonctionne bien et maintenant j'essaie d'obtenir un en-tête fixe en utilisant position: fixed
. Le résultat est:Prévenir les changements de largeur en appliquant la position: fixe
Inconsciemment le display: table-cell
appliqué au reste de la cellule provoque ce comportement non desiderated. Les cellules sont auto-redimensionnantes en s'adaptant au nouveau contenu et en suivant juste la règle min-width: 100px
que j'ai appliquée dans le fichier CSS.
Voici un lien vers un stylo de travail: https://codepen.io/l_core/pen/ZLQEjq
est-il un moyen de parvenir à un alignement parfait entre l'en-tête et les cellules « corps » avec une approche pure CSS? Je pourrais essayer de recalculer la largeur avec JS mais je suis sûr qu'il y a une manière élégante de réaliser cela et j'aimerais demander aux experts ici comment faire ceci.
Ci-dessous le code:
HTML
<!-- Row Container -->
<div class="row-container" id="row1">
<!-- Header cell container -->
<div class="cell cell-header" id="cell1">
<!-- Cell content container -->
<div class="cell-content">
<span>Cell</span>
</div>
</div>
<div class="cell cell-header" id="cell2">
<div class="cell-content">
<span>Cell</span>
</div>
</div>
<div class="cell cell-header" id="cell3">
<div class="cell-content">
<span>Cell</span>
</div>
</div>
<div class="cell cell-header" id="cell4">
<div class="cell-content">
<span>Cell</span>
</div>
</div>
<div class="cell cell-header" id="cell5">
<div class="cell-content">
<span>Cell</span>
</div>
</div>
CSS
#row1 {
position: fixed;
}
S'il vous plaît jeter un oeil à la plume que j'ai posté ci-dessus pour le code complet. Je ne suis pas sûr de ce que c'est une bonne idée de l'afficher dans toute sa longueur.
Pourquoi vous n'utilisez pas ''
Merci @Andrew pour votre réponse. J'évite volontairement l'approche sémantique '
Répondre
L'élément fixe est hors du flux html normal. Ainsi, votre en-tête de table ne fait plus partie de la table. Ainsi, ils se comportent indépendamment.
Vous pouvez définir une largeur constante (ou calculée dynamiquement en utilisant JS) pour toutes les cellules au lieu de la largeur minimale.
Source
2017-01-11 12:41:52
Merci pour votre réponse. Je souhaite éviter une largeur constante définie par une règle CSS. Quand vous parlez de "calculé dynamiquement", vous parlez d'une implémentation JS? – Lc0rE
Oui. Vous devez obtenir la largeur de vos cellules pour déterminer la largeur maximale. –
Je crois que si vous utilisez Flex comme un conteneur principal. Il va résoudre votre problème de largeur.
Et plus sur Flex, vous pouvez effectuer une recherche:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
Source
2017-01-12 07:29:22
Merci @Abhishek pour votre réponse! J'ai actuellement résolu en utilisant un code JS personnalisé qui définit la largeur des cellules.Mais je vais bientôt essayer votre solution pour voir si ça marche! – Lc0rE
Questions connexes