Comment faire défiler la table “tbody” indépendant de la “thead”?

Comme spécifié dans le W3 spécification pour les Tables:

Lignes de la Table peuvent être regroupées en tête de table, pied de table, et d'un ou
plus de la table de sections à l'aide de la THEAD, pied de page et TBODY éléments,
respectivement. Cette division permet à l'utilisateur les agents en charge le défilement
de la table des organismes indépendamment de la table, la tête et le pied.

J'ai créé le l'exemple suivant, mais il 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;
}

Connexes: stackoverflow.com/questions/33075195/...
À mon humble avis, vous devez ajouter un contraindre à la question: Comment faire défiler la table “tbody” indépendant de la “thead” en respectant l'alignement des colonnes de thead et tbody?

InformationsquelleAutor Misha Moroshko | 2011-11-30

46

La partie manquante est:
```
thead, tbody {
    display: block;
}
```
Démo
- Cela ne fonctionne pas dans IE, est-il une solution pour IE?
- quel est l'inconvénient de modification de l'affichage de la table, la tête et le corps de "table" à bloc ?
- Il a certainement des sauts de trucs. Juste un coup d'oeil ici dans ce jsbin premières différences sont visibles directement sur donc, fondamentalement, certains de la table des propriétés spécifiques suffit de le casser. Cette solution est à mon humble avis un hack.
- Je crois que j'aurais juste essayé moi-même, mais oui, ça a l'air un peu moche
- Avec cette méthode colspan devient inutilisable
- Oui, si vous ajoutez un couple de colonnes, il est évident qu'ils ne sont plus alignés: jsfiddle.net/nyCKE/2136
- Ne fonctionne pas lorsque height: 100% (lorsque vous souhaitez que le tableau s'étendre vers le bas de la page).
- Ne fonctionne pas lorsque la table n'est pas spécifié, la hauteur, qui est de 100% du temps.
- Désolé, mais si vous venez d'ajouter à la règle css td, th { border: solid black 1px; } vous remarquerez que ce n'est pas la bonne solution, car les colonnes et les en-têtes sont miss aligné en raison de la barre de défilement verticale de largeur. Jetez un oeil: jsfiddle.net/d8pxaumn . Donc, essayez d'utiliser thead * { position: collant; } au lieu de cela, avec quelques modifications mineures. Le tableau / disposition des colonnes aussi des freins, même si le texte en tbody td est plus long que le texte contenu
InformationsquelleAutor bookcasey
2

J'ai vu ce post il y a un mois quand j'ai eu des problèmes similaires. J'avais besoin d'y-axe de défilement pour une table à l'intérieur d'un dialogue de l'interface utilisateur (oui, vous m'avez bien entendu). J'ai eu la chance, dans une solution de travail a présenté lui-même assez rapidement. Cependant, il ne fallut pas longtemps avant que la solution a pris une vie propre, mais plus sur cela plus tard.

Le problème il suffit de régler les éléments de niveau supérieur (thead, tfoot et tbody) pour l'affichage des blocs, c'est que le navigateur de la synchronisation de la colonne de tailles entre les différentes composantes est vite perdu et tout les packs pour la plus petite taille autorisée. Réglage de la largeur des colonnes semble être le meilleur cours de l'action, mais sans définir les largeurs de toutes les composantes de la table pour correspondre au total de ces colonnes, même avec une table fixe de mise en page, il y a une légère divergence entre les en-têtes et le corps d'une barre de défilement est présent.

La solution pour moi a été de définir toutes les largeurs de vérifier si une barre de défilement était présent, et puis prendre l'échelle des largeurs le navigateur avait en fait décidé sur, et de copier ceux de l'en-tête et pied de page de réglage de la dernière colonne de la largeur de la taille de la barre de défilement. En faisant cela offre une certaine fluidité à la largeur des colonnes. Si des modifications de la largeur du tableau, la plupart des grands navigateurs de l'auto-échelle de la tbody largeurs de colonne en conséquence. Tout ce qu'il reste à définir l'en-tête et pied de page les largeurs de colonne à partir de leurs propres tbody tailles.
```
$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/.

Noter qu'un tableau de papier d'emballage ou des tableaux supplémentaires ne sont pas nécessaires pour l'axe y-simple. (X-axe de défilement ne nécessite pas une table d'enrubannage.) La synchronisation entre les tailles de colonne pour le corps et la tête encore être perdu si la taille de l'emballage minimum pour l'en-tête ou le corps des colonnes est rencontré. Un mécanisme pour une largeur minimum doivent être fournis si le redimensionnement est une option ou de petites largeurs de table sont attendus.

L'aboutissement ultime de ce point de départ est entièrement réalisé ici: http://borgboyone.github.io/jquery-ui-table/

A.
- Quelle est la différence entre .find("> thead, tfoot") et .children("thead, tfoot")?
- SirLanceLot: Dans ce cas particulier, il n'y a pas de différence de fonctionnement compte tenu de la ">" dans le sélecteur. Il rend certainement pour de meilleures performances à l'usage".les enfants("thead, tfoot").
InformationsquelleAutor Borgboy
1

de l'essayer.
```
table 
{
    background-color: #aaa;
}

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

td 
{
    padding: 3px 10px;
    color: green;
    width: 100px;
}
```
- Cela a très bien fonctionné pour moi, mais j'ai dû faire quelques modifications - à savoir, j'ai dû régler la largeur de chaque td en tant que pourcentage de la largeur de l'emprise et de l'ensemble de la td affichage "tableau".
InformationsquelleAutor Bhimbim

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 */
}

cela mettra fin à rompre le lien entre la table d'en-tête et le corps

InformationsquelleAutor John K. Chow

-1

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;
}

voulez-vous dire de la largeur?

InformationsquelleAutor freignat

Vous devez vous connecter pour publier un commentaire.