2017-01-11 1 views
0

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

enter image description here

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.

+0

Pourquoi vous n'utilisez pas ''

HTML. C'est ce que c'est pour. – Andrew

+0

Merci @Andrew pour votre réponse. J'évite volontairement l'approche sémantique '

'. Prenez-le comme un "projet personnel" – Lc0rE

Répondre

1

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.

+0

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

+0

Oui. Vous devez obtenir la largeur de vos cellules pour déterminer la largeur maximale. –

1

Je crois que si vous utilisez Flex comme un conteneur principal. Il va résoudre votre problème de largeur.

  1. Faites du conteneur principal un conteneur flexible.
  2. À l'intérieur du conteneur principal, faire de la flexion comme «colonne».

Et plus sur Flex, vous pouvez effectuer une recherche:

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

+0

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