web-dev-qa-db-fra.com

Comment faire défiler le "tbody" de la table indépendamment de "thead"?

Comme spécifié ici :

Les rangées de table peuvent être regroupées en une tête de table, un pied de table et un ou plusieurs sections du corps de la table, utilisant les éléments THEAD, TFOOT et TBODY, respectivement. Cette division permet aux agents utilisateurs de prendre en charge le défilement des corps de table indépendamment de la tête et du pied de la table.

J'ai créé l'exemple suivant , mais cela ne fonctionne pas.

HTML:

<table>
    <thead>
        <tr>
            <td>Problem</td>
            <td>Solution</td>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

JS:

$(function() {
    for (var i = 0; i < 20; i++) {
        var a = Math.floor(10 * Math.random());
        var b = Math.floor(10 * Math.random());
        var row = $("<tr>").append($("<td>").html(a + " + " + b + " ="))
                           .append($("<td>").html(a + b));
        $("tbody").append(row);
    }
});

CSS:

table {
    background-color: #aaa;
}
tbody {
    background-color: #ddd;
    height: 100px;
    overflow: auto;
}
td {
    padding: 3px 10px;
}
javascripthtmlcss
56
Misha Moroshko

La partie manquante est:

thead, tbody {
    display: block;
}

Démo

46
bookcasey

J'ai vu ce message il y a environ un mois alors que j'avais des problèmes similaires. J'avais besoin du défilement de l'axe des ordonnées pour une table dans un dialogue ui (oui, vous m'avez bien entendu). J'ai eu de la chance car une solution de travail s'est présentée assez rapidement. Cependant, la solution n'a pas tardé à prendre une vie propre, mais nous en parlerons plus tard.

Le problème qui consiste à définir les éléments de niveau supérieur (thead, tfoot et tbody) de manière à afficher le bloc est que la synchronisation par navigateur des tailles de colonne entre les divers composants est rapidement perdue et que tout est ramené à la plus petite taille autorisée. Définir la largeur des colonnes semble être la meilleure solution, mais sans régler la largeur de tous les composants de la table interne pour qu'elle corresponde au total de ces colonnes, même avec une disposition de table fixe, il existe une légère divergence entre les en-têtes et le corps. lorsqu'une barre de défilement est présente.

La solution pour moi était de définir toutes les largeurs, de vérifier si une barre de défilement était présente, puis de prendre les largeurs mises à l'échelle que le navigateur avait réellement choisies, et de les copier dans l'en-tête et le pied de page en ajustant la largeur de la dernière colonne à la taille du fichier. barre de défilement. Faire cela fournit une certaine fluidité à la largeur des colonnes. En cas de modification de la largeur de la table, la plupart des principaux navigateurs mettront automatiquement à l'échelle la largeur des colonnes tbody en conséquence. Tout ce qui reste à faire est de définir les largeurs des colonnes d'en-tête et de pied de page à partir de leurs tailles de corps respectives.

$table.find("> thead,> tfoot").find("> tr:first-child")
    .each(function(i,e) {
        $(e).children().each(function(i,e) {
            if (i != column_scaled_widths.length - 1) {
                $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()));
            } else {
                $(e).width(column_scaled_widths[i] - ($(e).outerWidth() - $(e).width()) + $.position.scrollbarWidth());
            }
        });
    });

Ce violon illustre ces notions: http://jsfiddle.net/borgboyone/gbkbhngq/ .

Notez qu'un wrapper de table ou des tables supplémentaires ne sont pas nécessaires pour le défilement sur l'axe des y uniquement. (Le défilement sur l'axe des abscisses nécessite une table d'habillage.) La synchronisation entre les tailles de colonne pour le corps et l'en-tête sera toujours perdue si la taille de paquet minimale pour les colonnes d'en-tête ou de corps est rencontrée. Un mécanisme pour les largeurs minimales doit être fourni si le redimensionnement est une option ou si de petites largeurs de table sont attendues.

Le point culminant ultime de ce point de départ est pleinement réalisé ici: http://borgboyone.github.io/jquery-ui-table/

UNE.

1
Borgboy

essaye ça.

table 
{
    background-color: #aaa;
}

tbody 
{
    background-color: #ddd;
    height: 100px;
    overflow-y: scroll;
    position: absolute;
}

td 
{
    padding: 3px 10px;
    color: green;
    width: 100px;
}
1
Bhimbim

parties obligatoires:

tbody {
    overflow-y: scroll;  (could be: 'overflow: scroll' for the two axes)
    display: block;
    with: xxx (a number or 100%)
}

thead {
    display: inline-block;
}
0
freignat
thead {
  position: fixed;
  height: 10px; /* This is whatever height you want */
}
  tbody {
  position: fixed;
  margin-top: 10px; /* This has to match the height of thead */
  height: 300px; /* This is whatever height you want */
}
0
John K. Chow