Gelé en-tête de tableau à l'intérieur de défilement div

Ici est une solution de base à l'aide de javascript:

function position(table) {
    table.rows[0].style.position="absolute";
    table.rows[0].style.top="0px";
    table.style.marginTop = table.rows[0].clientHeight/1.2;
    var widths = Array();
    for(var i = 0; i < table.rows[0].cells.length; i++) {
        widths[i] = max(table.rows[0].cells[i].clientWidth, table.rows[1].cells[i].clientWidth);
    }
    for(var row = 0; row < table.rows.length; row++) {
        for(var col = 0; col < widths.length; col ++) {
            table.rows[row].cells[col].style.width = widths[col] + "px";
        }
    }
}

function max(num1, num2) { return (num1 > num2) ? num1 : num2; }

OriginalL'auteur alumb

Vous devez mettre la tête à l'extérieur de la div scrollable. Tout à l'intérieur de la div de défilement.

MODIFIER

Concernant la largeur, si vous allez pour un en-tête distincte, je peux voir quelques solutions:

• En supposant que c'est du contenu dynamique, de générer des "fixe" largeur en fonction de la longueur de la chaîne. Évidemment spécifier en termes d'EMs et de laisser une certaine marge d'erreur.
• L'utilisation de javascript.
• Utiliser fixe la largeur des colonnes.

Je n'ai pas réellement essayé la première, et il pourrait être de compliquer à l'excès un peu les choses. C'est quelque chose à essayer si vous êtes désespéré pour l'effet.

Je dois aussi mentionner qu'il y a probablement des bibliothèques javascript avec une table, des widgets qui le font déjà. Jetez un oeil à eux de voir comment ils le font.

OriginalL'auteur Draemon

Voici une belle solution (surtout en CSS) qui utilise fixe la largeur des colonnes: http://www.imaputz.com/cssStuff/bulletVersion.html

Et voici un peu de jQuery pour fixer la cellule largeurs lorsque le contenu de la cellule prendre plus large que la largeur fixe:

<script
  src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"
  type="text/javascript"></script>
<script>
$(function() {
  $('div.tableContainer').each(function() { //for each table
    var div = $(this);
    var widths = [];
    var changed = false;
    $('table>*>tr', div).each(function(tr_i) {
      $(this).children().each(function(i) {
        var w = $(this).width();
        if (w > widths[i]) {
            widths[i] = w;
            changed = true;
        }
      });
    }).each(function(tr_i) {
      if (changed)
      $(this).children().each(function(i) {
        var width = widths[i];
        //add some width for scrollbar
        if (tr_i == 0 && changed && i == widths.length-1) width += 16;
        //insert a div to ensure width
        $(this).append('<div style="width:'+width+'px; height:0px">&nbsp;</div>');
      });
    });
    div.width(div.children('table').width()).css('overflow-x', 'hidden');
  });
});
</script>

La sortie est un peu dans IE lors de l'utilisation d'un non-DTD strict. Ajuster les largeurs dans le CSS si vous ne pouvez pas utiliser le mode standard.

Noter que le code jQuery augmente la largeur de la table à la fin, et désactive la barre de défilement horizontale. Vous pouvez ou ne voulez pas que.

OriginalL'auteur waqas

Ce que vous voulez vraiment faire, c'est faire de la <tbody> de la table de données de défilement, de sorte que le <thead> et <tfoot> restera naturellement fixes.

Alors que c'est trivial pour les FF et al:

tbody
{
    height: 100px; /* or whatever */
    overflow: auto;
    overflow-y: auto;
    overflow-x: hidden;
}

IE a grave et des questions complexes avec tbody en général. Il peut être résolu avec les expressions, mais c'est non-trivial, et spécifiques à la conception.

OriginalL'auteur annakata

Cette solution fonctionne à l'aide de CSS dans les navigateurs Firefox et les autres navigateurs Gecko, et les expressions CSS sous IE.

http://home.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.html

L'en-tête et pied de page ne pas rester fixé à l'Opéra ou Safari/Chrome, mais l'ensemble de la table est de défilement de sorte qu'il est utilisable. Notez que les colonnes sont données en pourcentage des largeurs de l'auteur, par exemple, mais ils peuvent être enlevés.

Si vous voulez expérimenter avec Opera/Safari/Chrome soutien, cherche à donner la tbody display:block et aller à partir de là.

OriginalL'auteur Andrew Duffy