Comment: Fixe-Tête du Tableau avec UNE table (pas de jQuery)

Je sais, il y a au moins 3 douzaine de questions de ce genre sur stackoverflow et encore, je ne pouvais pas faire ceci se produire:

Une simple table où thead est collé/fixe en haut, et la tbody défile à l'écran.
J'ai essayé tellement de choses dans les derniers jours et maintenant j'ai fini ici, criant à l'aide.

Une solution devrait fonctionner dans IE8+ récent et le FF, Chrome & Safari.
La différence d'autres "doublons possibles comme cette une est que je ne pas souhaitez utiliser deux tables imbriquées ou jQuery (plaine javascript est très bien tout de même).

Démonstration de ce que je veux:
http://www.imaputz.com/cssStuff/bigFourVersion.html.

Problème c'est que cela ne fonctionne pas dans IE, et je serait bien d'utiliser certains JS.

Non pas que sa pertinents à la discussion technique ici, mais AFAICT ce imaputz.com/cssStuff/bigFourVersion.html fonctionne sur IE10 OK (peut-être des versions antérieures cratères).
Êtes-vous sûr que ceci ne fonctionne pas sous IE pour vous? Qui c'est à dire? La page liée dit, il faut travailler dans IE6+.
il ne fonctionne pas avec IE8 (testé avec IE10 dans IE8-mode).
ce n'est pas - comme je l'ai mentionné, je ne veux pas utiliser deux tables imbriquées

OriginalL'auteur ProblemsOfSumit | 2012-07-16

sticky tableheader

14

Ok je l'ai eu:

Vous avez besoin de mettre la table en deux DIVs:
```
<div class="outerDIV">
  <div class="innerDIV">
    <table></table>
  </div>
</div>
```
Le CSS pour la balise div est-ce:
```
.outerDIV {
  position: relative;
  padding-top: 20px;   //height of your thead
}
.innerDIV {
  overflow-y: auto;
  height: 200px;       //the actual scrolling container
}
```
La raison en est, que vous parvenez à faire de l'intérieur de la DIV scrollable, et tirez le THEAD en le collant à l'extérieur DIV.

Maintenant coller le thead à la outerDIV en lui donnant
```
table thead {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}
```
La tbody doit avoir display: block.

Maintenant, vous remarquerez que le défilement fonctionne, mais les largeurs sont complètement messep. Qui ont été Javascript.
Vous pouvez choisir vous-même comment vous voulez lui attribuer. - Je pour moi-même donné la TH dans le tableau des largeurs fixes et construit un script simple qui prend la largeur et les attribue à la première TD-ligne dans la tbody.

Quelque chose comme cela devrait fonctionner:
```
function scrollingTableSetThWidth(tableId)
{
    var table = document.getElementById(tableId);

    ths = table.getElementsByTagName('th');
    tds = table.getElementsByTagName('td');

    if(ths.length > 0) {
        for(i=0; i < ths.length; i++) {
            tds[i].style.width = getCurrentComputedStyle(ths[i], 'width');
        }
    }
}

function getCurrentComputedStyle(element, attribute)
{
    var attributeValue;
    if (window.getComputedStyle) 
    { //class A browsers
        var styledeclaration = document.defaultView.getComputedStyle(element, null);
        attributeValue = styledeclaration.getPropertyValue(attribute);
    } else if (element.currentStyle) { //IE
        attributeValue = element.currentStyle[vclToCamelCases(attribute)];
    }
    return attributeValue;
}
```
Avec jQuery bien sûr, ce serait beaucoup plus facile, mais pour l'instant je n'ai pas été autorisé à utiliser un tiers de la bibliothèque pour ce projet.

Il convient de prendre le premier TD-ligne dans la tbody de la largeur et de l'attribuer à th largeur, l'autre manière autour. sat[i].style.largeur = getCurrentComputedStyle(tds[i], 'largeur');
Bien sûr, vous pouvez le faire dans l'autre sens. Dans ce cas d'utilisation, j'ai eu à le faire de cette façon, parce que l'utilisateur définit la largeur de la TH avant (dynamicly créé une table) et il définit la largeur de l'ensemble de la table
ok, ça sonne comme ses diff de cas d'utilisation, donc traitées différemment.
Désolé, mais je n'ai pas compris la 2ème fonction? que dois-je faire?
il suffit d'insérer la deuxième fonction quelque part. Il est appelé par la première fonction. Il va calculer à l'aide de styles CSS pour un élément donné (ce qui, bien sûr, est beaucoup plus facile avec jQuery et les goûts).

OriginalL'auteur ProblemsOfSumit
-1

Peut-être que nous devrions changer une méthode pour obtenir cet objectif.Tels que:
```
<div><ul><li>1</li><li>2</li></ul></div> //make it fixed
<table>
    <thead>
        <tr><th>1</th><th>2</th></tr>
    </thead>
    <tfoot></tfoot>
    <tbody></tbody>
</table>
```
Bien sûr, ce n'est pas bon de sematic.Mais c'est la façon la plus simple sans js ou jq.
Tu ne crois pas?

non, je n'ai pas. Votre div n'a pas besoin d'être fixé. Il ne fait pas partie de la vitesse de défilement du corps. Les largeurs serait aussi totalement faux par rapport à la table de la largeur des cellules. Votre réponse est la même que Gandalfs ci-dessous et ne fonctionne pas. Ce n'est pas possible sans JS.
Êtes-vous sûr? Donnez-moi votre email et je vous enverrai mon exemple pour vous.
Si votre talbe est en haut de la fenêtre, ma solution sera la bonne. Si ce n'est pas l'affichage de cette div aucun de début et de faire bloc quand la talbe scolls vers le haut et d'en faire aucun nouveau lorsque la talbe ne peut pas être vu. Bien sûr, certains js doit être utilisé.
La construction d'un exemple sur jsfiddle.net. Il ne fonctionnera pas. J'en suis sûr.
Ouais,bon. Maintenant vous pouvez aller jsfiddle.net/JChen___/3fUFV pour voir mon exemple.

OriginalL'auteur JChen___

Vous devez vous connecter pour publier un commentaire.