CSS-Only Scrollable Table avec en-têtes fixes

Question

J'ai une solution qui me permette de créer des listes déroulantes w/fixe-tête/pied de page à l'aide de mineur jQuery et CSS mais je suis à la recherche d'un moyen de faire une CSS, la seule solution est de la croix-navigateur compatible.

Pour être clair, ce que je cherche à faire est d'utiliser seulement un table balise (et c'est valable sous-balises, colgroup, col, thead, tbody, tfoot, tr, th, td), mais adopter un ensemble de règles CSS qui permettra de répondre aux conditions suivantes:

1. Doit maintenir l'alignement des colonnes entre en-tête / pied de page / contenu des lignes
2. Doit permettre l'en-tête/pied de page reste fixe tandis que le contenu défile verticalement
3. Ne doit pas exiger de toute jQuery ou JavaScript afin de fournir la fonctionnalité
4. Doit utiliser uniquement les balises fournies ci-dessus

Cet exemple de code: http://jsfiddle.net/TroyAlford/SNKfd/ montre mon approche actuelle. La plupart des JS est juste pour remplir le tableau avec des valeurs aléatoires, mais la dernière partie est ce qui a conduit la gauche/droite capacité à permettre le défilement.

$tbody.bind('scroll', function(ev) {
    var $css = { 'left': -ev.target.scrollLeft };
    $thead.css($css);
    $tfoot.css($css);
});

REMARQUE: L'exemple fourni ne pas s'afficher correctement dans internet explorer, et nécessite jQuery pour fournir le défilement horizontal. Je ne se soucient pas de défilement horizontal de toute façon, il est donc très bien si une solution n'est pas de le faire.

Answer 1

Autant que je sache, il n'existe pas de méthode standard pour réaliser cela avec uniquement du CSS, bien que je pense qu'il devrait être. Mozilla navigateurs utilisés à l'appui fixe les en-têtes avec un défilement de l'organisme, mais ils ont éliminé au cours de la dernière quelques années.

A7ter recherche ce un peu, y compris la recherche de cette publication, un ami de l'développé cette solution pour moi; il utilise du Javascript, mais pas en conserve les bibliothèques, et la seule exigence pour le balisage HTML, c'est que la table ont un nom d'identification. Puis, à la fenêtre.onload, pour appeler une fonction Javascript pour chaque table, donnant l'id, la hauteur et la largeur. Si Javascript est désactivé sur le navigateur, l'ensemble de la table est affichée en fonction de son origine balisage. Si Javascript est activé, le tableau est inséré dans la spécifié de la hauteur et la largeur, et tbody parchemins, et si thead et tfoot existent, ils sont fixés en haut et en bas.

Answer 2

Si vous avez la possibilité de donner une largeur fixe aux cellules du tableau (et une hauteur fixe à l'en-tête), vous pouvez utiliser l'option position: fixed :

http://jsfiddle.net/thundercracker/ZxPeh/23/

Il vous suffirait de la coller dans un iframe . Vous pouvez également avoir le défilement horizontal en donnant à iframe une barre de défilement (je pense).

Answer 3

Je vois que ce fil a été inactif pendant un certain temps, mais ce sujet m'a intéressé et maintenant, avec certains des sélecteurs CSS3, ce sera plus facile (et assez faisable avec uniquement du CSS).

Cette solution s'appuie sur une hauteur max de la table contenant. Mais il est pris en charge aussi longtemps que vous pouvez utiliser l' :first-child - sélecteur.

Violon ici.

Si quelqu'un peut améliorer cette réponse, s'il vous plaît! J'ai l'intention sur l'utilisation de cette solution dans une application commerciale bientôt!

HTML

<div id="con">
<table>
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>        
    <tbody>             
    </tbody>
</table>
</div>

CSS

#con{
    max-height:300px;
    overflow-y:auto;
}
thead tr:first-child {
    background-color:#00f;
    color:#fff;
    position:absolute;
}
tbody tr:first-child td{
    padding-top:28px;
}