Rendre TBODY déroulable dans les navigateurs Webkit

Question

Je suis conscient de cette question, mais aucune des réponses ne fonctionne dans Safari, Chrome, etc.

La stratégie acceptée (comme démontré ici) consiste à définir la hauteur de tbody et les propriétés de débordement comme ceci :

        Ceci est l'en-tête et ne défiler pas

        contenu qui défiler
        contenu qui défiler
        contenu qui défiler
        contenu qui défiler
        contenu qui défiler
        contenu qui défiler
        contenu qui défiler

Malheureusement, cela ne fonctionne pas dans les navigateurs webkit. Il y a un rapport de bogue à ce sujet qui ne semble pas être une priorité élevée (signalé en juin 05).

Ma question est donc : existent-ils d'autres stratégies alternatives qui fonctionnent réellement? J'ai essayé l'approche des deux tableaux, mais il est impossible de garantir que l'en-tête se synchronisera avec le contenu. Dois-je juste attendre que Webkit le corrige?

Answer 1

J'ai rencontré le même problème il y a longtemps, et j'ai finalement opté pour l'approche des deux tables. Voici le résultat : http://jsfiddle.net/bGr4V/3/, cela fonctionne pour tous les navigateurs (y compris IE6+).

Sur ce jsFiddle, vous pouvez jouer avec une version propre.

Ma solution a été d'ajouter une cellule de fixation dans thead pour combler l'espace de la barre de défilement dans tbody, puis de donner une largeur variable à une colonne (), afin que la cellule de fixation de l'en-tête ne soit pas décalée lors du redimensionnement.

HTML :

CSS : comporte un hack * et _ pour ie6-7, et un spécifique à -webkit pour faire correspondre la largeur de la cellule de fixation de l'en-tête à celle de défilement dans chaque cas.

.fixed_table table {
  table-layout: fixed;
  width: auto;
  border-width: 0;
  padding: 0;
  border-collapse: collapse;
}

.fixed_table .body {
  overflow: scroll;
  overflow-x: hidden;
  max-height: 10.75em;
  min-height: 2.5em;
  padding-bottom: 0.8em;
  *padding-right: 17px; /*ie7 & ie6*/
  _padding-right: 0; /*ie6*/
  _height: 10em ;
}

.fixed_table th, .fixed_table td {
  width: 4.7em;
}

.fixed_table .grow {
  width: auto;
}

.fixed_table .fix {
  width: 16px;
  *width: 17px; /*ie7 & ie6*/
  _width: 16px; /*ie6*/
}

/* spécifique à webkit */
@media screen and (-webkit-min-device-pixel-ratio:0) {
  .fixed_table .fix{ width: 17px }
}

Answer 2

J'ai pensé ajouter ma solution - http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/.

Il suit la même méthode de base que la solution de @Michael Koper mais inclut une astuce pour que le tableau s'affiche correctement dans IE jusqu'à IE6.

Je résous le problème de largeur en donnant à la `table-layout: fixed`

Démo : http://codepen.io/tjvantoll/pen/JEKIu

un et en assignant explicitement la largeur aux cellules de chaque colonne. Pas idéal mais cela produit un tableau sémantique qui s'alignera correctement dans tous les navigateurs, qu'une barre de défilement soit nécessaire ou non.``

Answer 3

J'ai développé une solution javascript pour le problème ci-dessus
qui ne fonctionne que dans Firefox 7+ car je l'ai testé uniquement dans FF

Je suis venu sur ce fil de discussion et j'ai trouvé la solution indiquée par Michael Koper

Dans cette solution, trois choses importantes sont faites
1) fixer la largeur des colonnes
2) afficher tr dans thead en mode block
3) afficher tbody en mode block

comme d'autres ont mentionné leur problème pour fixer la largeur, je suis également dans la même position;
je ne peux même pas fixer la largeur de manière statique

alors j'ai pensé que je vais fixer la largeur dynamiquement (après que le tableau soit rendu dans le navigateur) et cela a fonctionné :)

voici la solution en javascript qui ne fonctionne que dans FF
(je l'ai testé uniquement dans FF, je n'ai pas accès aux autres navigateurs)

       function test1(){                
            var tbodys = document.getElementsByTagName("TBODY");
            for(var i=0;i

`

Cette solution détermine quelle est la largeur de la colonne à partir du navigateur
et réinitialise la même largeur aux colonnes (en-tête et première ligne de tbody)
une fois que la largeur est définie; tr dans thead et tbody sont affichés en mode block

J'espère que cette solution vous sera utile ..
si vous pouvez l'étendre à d'autres navigateurs, veuillez répondre à ce message

`

Answer 4

C'est vraiment très bricolé mais peut-être que cela aidera quelqu'un quelque part...

http://jsfiddle.net/yUHCq/1/

Il utilise des colonnes au lieu de lignes donc le traitement serait essentiellement effectué à l'envers.

DOCTYPE de transition ajouté pour la compatibilité avec IE.

Answer 5

Il peut être exagéré pour cette question, mais YUI propose toujours probablement la meilleure datatable gratuite compatible avec tous les navigateurs. Elle peut être utilisée également pour des données en lecture seule.

YUI 2 DataTable

YUI 3 DataTable

Cliquez sur les exemples là-bas pour voir des échantillons défilables. Étant donné que je suis un débutant sur stackoverflow, je ne peux que poster ces deux liens.