tableau html avec défilement vertical à l'intérieur tbody

Je fais des efforts pour une barre de défilement verticale à l'intérieur tbody avec un en-tête fixe. J'ai essayé la solution fournie dans le lien.

Tableau HTML avec 100% de largeur, avec défilement vertical à l'intérieur tbody

table {
width: 100%;
border-spacing: 0;
}

thead, tbody, tr, th, td { display: block; }

thead tr {
/* fallback */
width: 97%;
/* minus scroll bar width */
width: -webkit-calc(100% - 16px);
width:    -moz-calc(100% - 16px);
width:         calc(100% - 16px);
}

tr:after {  /* clearing float */
content: ' ';
display: block;
visibility: hidden;
clear: both;
}

tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}

tbody td, thead th {
width: 19%;  /* 19% is less than (100% /5 cols) = 20% */
float: left;
}

Il fonctionne très bien si la barre de défilement apparaît.Mais si les lignes sont peu nombreux et la barre de défilement ne s'affiche pas, alors thead n'est pas aligné avec tbody. Comment puis-je résoudre le problème avec le css?

tableau html avec défilement vertical à l'intérieur tbody

  • Pouvez-vous insérer un jsfiddle dans le post?
InformationsquelleAutor Nagendra | 2016-06-28
  1. 4

    Une fois votre tbody données de déménagement à partir assigné à la hauteur de l'axe des y est activé.

     tbody {
        height: 50px;
        display: inline-block;
        width: 100%;
        overflow-y:scroll;
    }
    InformationsquelleAutor frnt
  2. 1

    C'est parce que le CSS ci-dessus réduit la largeur de la thead tr's largeur de 97% ou (100% de la largeur de la barre de défilement) à accueillir pour la réduction de la largeur de la tbody en raison de la barre de défilement dans tbody seulement. Si il n'y a pas de barre de défilement dans tbody puis la tbody reste totalement à 100%, mais que le thead est encore rétréci.

    Vous souhaitez corriger est avec le CSS, le CSS ne peut pas reconnaître le fait qu'il n'y a pas assez de lignes pour la barre de défilement pour afficher. Vous pourrez fixer à l'aide de JavaScript bien - il suffit de regarder dans la réponse que vous avez cité, il y a des exemples d'utilisation de JavaScript pour appliquer la largeur de la tbody colonnes à thead juste au début de la réponse.

    MODIFIER

    Ou de force barre de défilement verticale à tout moment, de telle sorte que la largeur de la tbody ne change pas quel que soit le nombre de lignes:

    tbody {
    # ... other attributes
    overflow-y: scroll;
}

    prises à partir de:
    La Force De Barre De Défilement Verticale

    • Merci. J'ai essayé de jquery solution à condition qu'il fonctionne très bien
    InformationsquelleAutor Tomasz Stanczak
  3. 0

    Utilisation tbody max-height:100px au lieu de height:100px

    tbody {
    max-height: 100px;
    overflow-y: auto;
    overflow-x: hidden;
}
    InformationsquelleAutor Mani