Afin de faire <tbody>défiler l'élément, nous devons changer la façon dont il est affiché sur la page, c'est-à-dire utiliser display: block;pour l'afficher en tant qu'élément de niveau bloc.
Puisque nous modifions la displaypropriété de tbody, nous devons également modifier cette propriété pour l' theadélément afin d'éviter de casser la disposition du tableau.
Donc nous avons:
thead, tbody { display: block; }
tbody {
height: 100px; /* Just for the demo */
overflow-y: auto; /* Trigger vertical scroll */
overflow-x: hidden; /* Hide the horizontal scroll */
}
Les navigateurs Web affichent les éléments theadet tbodysous forme de groupe de lignes ( table-header-groupet table-row-group) par défaut.
Une fois que nous avons changé cela, les tréléments intérieurs ne remplissent pas tout l'espace de leur conteneur.
Pour résoudre ce problème, nous devons calculer la largeur des tbodycolonnes et appliquer la valeur correspondante aux theadcolonnes via JavaScript.
Colonnes de largeur automatique
Voici la version jQuery de la logique ci-dessus:
// Change the selector if needed
var $table = $('table'),
$bodyCells = $table.find('tbody tr:first').children(),
colWidth;
// Get the tbody columns width array
colWidth = $bodyCells.map(function() {
return $(this).width();
}).get();
// Set the width of thead columns
$table.find('thead tr').children().each(function(i, v) {
$(v).width(colWidth[i]);
});
Et voici la sortie (sur Windows 7 Chrome 32) :
DÉMO DE TRAVAIL .
Tableau pleine largeur, colonnes de largeur relative
Comme l'affiche originale le nécessitait, nous pourrions étendre le tableà 100% de widthson conteneur, puis utiliser un relatif ( pourcentage ) widthpour chaque colonne du tableau.
table {
width: 100%; /* Optional */
}
tbody td, thead th {
width: 20%; /* Optional */
}
Étant donné que la table a une (sorte de) disposition fluide , nous devons ajuster la largeur des theadcolonnes lorsque le conteneur est redimensionné.
Par conséquent, nous devons définir la largeur des colonnes une fois la fenêtre redimensionnée:
// Adjust the width of thead cells when *window* resizes
$(window).resize(function() {
/* Same as before */
}).resize(); // Trigger the resize handler once the script runs
La sortie serait:
DÉMO DE TRAVAIL .
Prise en charge du navigateur et alternatives
J'ai testé les deux méthodes ci-dessus sur Windows 7 via les nouvelles versions des principaux navigateurs Web (y compris IE10 +) et cela a fonctionné.
Cependant, cela ne fonctionne pas correctement sur IE9 et les versions antérieures .
En effet, dans une disposition de table , tous les éléments doivent suivre les mêmes propriétés structurelles.
En utilisant display: block;les éléments <thead>et <tbody>, nous avons rompu la structure de la table.
Refonte de la mise en page via JavaScript
Une approche consiste à repenser la disposition (entière) du tableau. Utiliser JavaScript pour créer une nouvelle mise en page à la volée et gérer et / ou ajuster dynamiquement les largeurs / hauteurs des cellules.
Par exemple, jetez un œil aux exemples suivants:
Tables gigognes
Cette approche utilise deux tables imbriquées avec un div contenant. La première tablen'a qu'une seule cellule qui a un div, et le second tableau est placé à l'intérieur de cet divélément.
Vérifiez les tables de défilement vertical sur CSS Play .
Cela fonctionne sur la plupart des navigateurs Web. Nous pouvons également faire la logique ci-dessus dynamiquement via JavaScript.
Tableau avec en-tête fixe sur défilement
Étant donné que le but d'ajouter une barre de défilement verticale à l' <tbody>affichage de l'en- tête du tableau en haut de chaque ligne, nous pourrions positionner l' theadélément pour qu'il reste fixeden haut de l'écran.
Voici une démonstration de travail de cette approche réalisée par Julien .
Il a un support de navigateur Web prometteur.
Et voici une implémentation CSS pure par Willem Van Bockstal .
La solution Pure CSS
Voici l'ancienne réponse. Bien sûr, j'ai ajouté une nouvelle méthode et affiné les déclarations CSS.
Table à largeur fixe
Dans ce cas, le tabledevrait avoir un fixe width (y compris la somme des largeurs des colonnes et la largeur de la barre de défilement verticale) .
Chaque colonne doit avoir une largeur spécifique et la dernière colonne de l' theadélément a besoin d'une plus grande largeur qui est égale à la largeur des autres + la largeur de la barre de défilement verticale.
Par conséquent, le CSS serait:
table {
width: 716px; /* 140px * 5 column + 16px scrollbar width */
border-spacing: 0;
}
tbody, thead tr { display: block; }
tbody {
height: 100px;
overflow-y: auto;
overflow-x: hidden;
}
tbody td, thead th {
width: 140px;
}
thead th:last-child {
width: 156px; /* 140px + 16px scrollbar width */
}
Voici la sortie:
DÉMO DE TRAVAIL .
Table avec 100% de largeur
Dans cette approche, le tablea une largeur de 100%et pour chacun thet td, la valeur de la widthpropriété doit être inférieure à 100% / number of cols.
De plus, nous devons réduire la largeur de theadas comme valeur de la largeur de la barre de défilement verticale.
Pour ce faire, nous devons utiliser la calc()fonction CSS3 , comme suit:
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;
}
Voici la démo en ligne .
Remarque: Cette approche échouera si le contenu de chaque colonne rompt la ligne, c'est -à- dire que le contenu de chaque cellule doit être suffisamment court .
Dans ce qui suit, il existe deux exemples simples de solution CSS pure que j'ai créés au moment où j'ai répondu à cette question.
Voici la démo jsFiddle v2 .
Ancienne version: jsFiddle Demo v1
