Faire défiler TBODY dans les navigateurs Webkit

StackOverflow https://stackoverflow.com/questions/1019938

  •  06-07-2019
  •  | 
  •  

Question

Je suis au courant 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 les propriétés de hauteur et de débordement de tbody comme suit: 

<table>
    <thead>
        <tr><th>This is the header and doesn't scroll</th></tr>
    </thead>
    <tbody style="height:100px; overflow:auto;">
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
    </tbody>
</table>

Malheureusement, cela ne fonctionne dans aucun navigateur Webkit. Il y a un rapport de bogue qui ne semble pas être élevé. priorité (rapporté le 05 juin).

Ma question est donc la suivante: existe-t-il d’autres stratégies qui fonctionnent réellement? J'ai essayé l'approche à deux tables, mais il est impossible de garantir que l'en-tête s'alignera avec le contenu. Dois-je simplement attendre que Webkit le corrige?

Était-ce utile?

La solution

Voici un exemple de travail:

http://www.imaputz.com/cssStuff/bigFourVersion.html

Vous devez ajouter display: block to the thead > tr et tbody

Autres conseils

Utilisation de l'affichage: le style de bloc ne fonctionne que si vous avez 1 colonne. Si vous avez plusieurs colonnes de données - avec plusieurs champs -, alors display: block apparaît pour faire défiler toutes les colonnes de données mais sous la 1re colonne (fait de même avec Firefox - qui est le seul navigateur que je connaisse qui défile correctement). Incidemment, sur Firefox, vous pouvez utiliser le style overflow-x: hidden pour supprimer le défilement horizontal.

J'ai réalisé que le problème que je mentionne ne se produit que si vous ne spécifiez pas de largeur pour le th & ampli; td elements - si vous pouvez corriger la largeur des colonnes, alors cela fonctionne. Le problème pour moi est que je ne peux pas réparer la largeur des colonnes.

Essayez la première méthode de cette page, du CSS pur avec une seule table (2 divs autour de la table, et le thead est positionné absolu): http://www.cssplay.co.uk/menu/tablescroll.html Semble fonctionner sur FF4 / IE9 / IE8 en plus de IE7 / FF3.6.

J'ai eu le même problème et j'ai écrit un script jQuery pour le faire pour moi ... utilise deux éléments de tableau et formate le css en conséquence. J'espère que cela aidera les autres qui ont le même problème ...

http://jsfiddle.net/pe295/1/

J'ai vu la solution excellente de Sean Haddy et j'ai pris la Liberté de apporter des modifications :

  • Utilisez des classes à la place de l'ID pour qu'un script jQuery puisse être réutilisé plusieurs tables sur une seule page
  • Ajout de la prise en charge des éléments de tableau HTML sémantique tels que caption, thead, tfoot et tbody
  • Barre de défilement rendue facultative afin qu'elle n'apparaisse pas pour les tableaux & "; plus court &"; que la hauteur de défilement
  • Ajustement de la largeur du curseur de défilement pour amener la barre de défilement jusqu'au bord droit du tableau
  • Concept accessible au moyen de
    • using aria-hidden = " true " sur l'en-tête de table statique injecté
    • et en laissant l'original en place, juste caché avec jQuery et définissez aria-hidden="false"
  • Exemples montrés de plusieurs tables avec différentes tailles

Cependant, Sean a fait le gros du travail. Merci également à Matt Burland pour avoir souligné la nécessité de soutenir tFoot.

Veuillez vous rendre sur la page http://jsfiddle.net/jhfrench/eNP2N/

A fait face au même problème depuis longtemps et j’ai enfin présenté l’approche à deux tableaux. Voici le résultat: http://jsfiddle.net/bGr4V/3/ , cela fonctionne pour tous navigateurs (IE6 + incl.)

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

Ma solution a été d'ajouter une cellule de correction <th class="fix"> </th> à thead pour remplir l'espace de la barre de défilement dans tbody, puis attribuer une largeur variable à une colonne (<td class="grow"> ), afin que l'en-tête corriger la cellule ne puisse pas être mis en correspondance lors du redimensionnement.

HTML: 

<div class="fixed_table">
  <div class="head">
    <table>
      <thead>
        <tr>
          <th>Column header</th>
          <th class="grow">Column header</th>
          <th class="fix"> </th>
        </tr>
      </thead>
    </table>
  <div class="body">
    <table class="full_table">
      <caption class="caption">Caption</caption>
      <tbody>
        <tr>
          <td>Data</td>
          <td class="grow">Data</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
        <tr>
          <td>...</td>
          <td>...</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS: a * et _ hack pour ie6-7, et un -webkit spécifique pour l'en-tête correct-cell correspondant à la largeur de défilement de 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*/
}

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

Je pensais que je mettrais ma solution dans le mélange - http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/ .

Il prend le même chemin de base que la solution de @Michael Koper, mais inclut une solution de contournement afin que le tableau paraisse correct dans IE, puis dans IE6.

Je résous le problème de la largeur en attribuant au <table> un table-layout: fixed et en attribuant explicitement la largeur aux cellules de chaque colonne. Ce n’est pas idéal, mais cela produit un tableau sémantique qui alignera les différents navigateurs, qu’une barre de défilement soit nécessaire ou non.

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

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

Je suis arrivé à ce fil et j'ai trouvé la solution indiquée par Michael Koper

Dans cette solution, trois choses importantes sont effectuées
1) fixer la largeur de la colonne
2) thead & Gt; tr affichage est réglé pour bloquer
3) L’affichage de la carrosserie est configuré pour bloquer

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

donc je pensais que je corrigerais la largeur dynamiquement (après que la table soit rendue dans le navigateur) et cela a fait le tour:)

Voici la solution en javascript qui ne fonctionne qu'en FF
(J'ai testé uniquement en FF, je n'ai pas accès à d'autres navigateurs) 

       function test1(){                
            var tbodys = document.getElementsByTagName("TBODY");
            for(var i=0;i<tbodys.length;i++){
                do_tbodyscroll(tbodys[i]);
            }
        }


      function do_tbodyscroll(_tbody){
            // get the table node 
            var table = _tbody.parentNode;

            // first row of tbody 
            var _fr = _tbody.getElementsByTagName("TR")[0];

            // first row cells .. 
            var _frcells = _fr.cells;

            // Width array , width of each element is stored in this array 
            var widtharray = new Array(_frcells.length);

            for(var i=0;i<_frcells.length;i++){                    
                widtharray[i] = _frcells[i].scrollWidth;
            }                

            // Apply width to first row                  
            for(var i=0;i<_frcells.length;i++){
                _frcells[i].width = widtharray[i];                   
            }                 

            // Get the Last row in Thead ... 
            // COLGROUPS USING COLSPAN NOT YET SUPPORTED

            var thead = table.getElementsByTagName("THEAD")[0];
            var _rows = thead.getElementsByTagName("TR");
            var tableheader = _rows[_rows.length - 1];
            var headercells = tableheader.cells;

            // Apply width to header ..                                
            for(var i=0;i<headercells.length;i++){
                headercells[i].width = widtharray[i];
            }

            // ADD 16 Pixel of scroll bar to last column ..
            headercells[headercells.length -1 ].width = widtharray[headercells.length -1] + 16;

            tableheader.style.display = "block";
            _tbody.style.display = "block";  
        }

Cette solution détecte la largeur de la colonne à partir du navigateur.
et redéfinissez la même largeur pour les colonnes (en-tête et première ligne de tbody)

après que la largeur est définie; thead > l'affichage tr et tbody est configuré pour bloquer

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

C’est vraiment assez hacky, mais peut-être cela aidera-t-il quelqu'un quelque part ...

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

Il utilise des colonnes au lieu de lignes afin que le traitement soit essentiellement effectué à l'envers.

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

C'est peut-être excessif pour cette question, mais YUI fournit toujours le meilleur datatable multi-navigateurs gratuit. Il peut également être utilisé pour les données en lecture seule.

YUI 2 DataTable

YUI 3 DataTable

Cliquez sur les exemples pour voir des exemples défilables. Depuis, je suis novice sur stackoverflow, je ne peux poster que ces deux liens.

Ajouter display:block; Ceci supprimera également le défilement horizontal inutile dans FireFox. Vous savez sans doute également qu'aucun de ces exemples ne fonctionne dans MSIE 8. 

<table>
    <thead>
        <tr><th>This is the header and doesn't scroll</th></tr>
    </thead>
    <tbody style="height:100px; overflow:auto;display:block;">
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
        <tr><td>content that scrolls</td></tr>
    </tbody>
</table>

Il existe un exemple ici qui fonctionne dans IE5 +, Firefox et Chrome. Cependant, il utilise des colonnes de largeur fixe. http://www.cssplay.co.uk/menu/tablescroll.html

Si quelqu'un a besoin de travailler en mode quirks IE, voici comment j'ai modifié et simplifié I.G. Le code de Pascual au travail: 

.fixed_table{
       overflow: scroll;
       overflow-x: hidden;
       max-height: 300px;
       height: 300px;
       min-height: 50px;
       padding-right:0;
}
#datatable td 
{
       padding:3px;
       text-align: center;
       width: 9%;
       vertical-align: middle;
       background-color: #343435; 
       color: #E0E0E3;
       overflow:hidden;
} 
<div class="head">
    <table>
        <thead>
            <tr>
                <th>Time (GMT)</th>
                <th>Price</th>
            </tr>
        </thead>
    </table>
</div>
<div class="fixed_table">
    <table id="datatable" cellspacing="1" cellpadding="1">
        <tbody></tbody>
    </table>
</div>

Laissez le tableau dessiner à votre guise, calculez la largeur de chaque colonne et réglez-le sur chaque en-tête. Les titres sont faits avec des divisions et nous pouvons alors laisser la table défiler librement. 

<!DOCTYPE html>
<html>
<head>
<style>
.t_heading{
  margin-top: 20px;
  font-family: Verdana, Geneva, sans-serif;
  background-color: #4CAF50;
}

.heading{
  background-color: #4CAF50;
  color: white;
  float:left;
  padding: 8px 0PX 8PX 0PX;
  border-bottom: 1px solid #ddd;
  height: 20px;
  text-align: left;
}

.t_data{
  overflow-y: scroll;
  overflow-x: hidden;
  height:0px;
  width: 100%;

}

.t_content{
    border-collapse: collapse;
    font-family: Verdana, Geneva, sans-serif;
    width: 100%;
}

.column1,.column2,.column3,.column4{
    padding: 8px 0PX 8PX 0PX;
    text-align: left;
    border-bottom: 1px solid #ddd;
}
.t_row:hover{
  background-color:#f5f5f5;
}
</style>
<script>
function setBody(){
    var body = document.body,
    html = document.documentElement;

    var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
    height = height-300;
    /*
     ** By changing the subtraction value, You can fit the table in to the screen correctly.
     ** Make sure not to come the hscroll.
     ** Or you can set fixed height with css for the div as your wish.
     */
    document.getElementById("t_data").style.height = height+"px";

    setColumnWidth("column1");
    setColumnWidth("column2");
    setColumnWidth("column3");
    setColumnWidth("column4");
}

function setColumnWidth(o){
        var object = o;
        var x = document.getElementsByClassName(object);
        var y = x[0].clientWidth;
        document.getElementById(object).style.width = y+"px";
 }
</script>
</head>

<body onload="setBody()">
<div class="t_heading">
<div class="heading"  id="column1">Heading 1</div>
<div class="heading"  id="column2">Heading 2</div>
<div class="heading"  id="column3">Heading 3</div>
<div class="heading"  id="column4">Heading 4</div>
</div>
<div class="t_data" id="t_data">
<table class="t_content">
    <tr class='t_row'>
        <td class='column1'>Column1 Row 0</td>
        <td class='column2'>Column2 Row 0</td>
        <td class='column3'>Column3 Row 0</td>
        <td class='column4'>Column4 Row 0</td>
    </tr><tr class='t_row'>
        <td class='column1'>Column1 Row 1</td>
        <td class='column2'>Column2 Row 1</td>
        <td class='column3'>Column3 Row 1</td>
        <td class='column4'>Column4 Row 1</td>
    </tr><tr class='t_row'>
        <td class='column1'>Column1 Row 2</td>
        <td class='column2'>Column2 Row 2</td>
        <td class='column3'>Column3 Row 2</td>
        <td class='column4'>Column4 Row 2</td>
    </tr><tr class='t_row'>
        <td class='column1'>Column1 Row 3</td>
        <td class='column2'>Column2 Row 3</td>
        <td class='column3'>Column3 Row 3</td>
        <td class='column4'>Column4 Row 3</td>
    </tr><tr class='t_row'>
        <td class='column1'>Column1 Row 4</td>
        <td class='column2'>Column2 Row 4</td>
        <td class='column3'>Column3 Row 4</td>
        <td class='column4'>Column4 Row 4</td>
    </tr><tr class='t_row'>
        <td class='column1'>Column1 Row 5</td>
        <td class='column2'>Column2 Row 5</td>
        <td class='column3'>Column3 Row 5</td>
        <td class='column4'>Column4 Row 5</td>
    </tr><tr class='t_row'>
        <td class='column1'>Column1 Row 6</td>
        <td class='column2'>Column2 Row 6</td>
        <td class='column3'>Column3 Row 6</td>
        <td class='column4'>Column4 Row 6</td>
    </tr><tr class='t_row'>
        <td class='column1'>Column1 Row 7</td>
        <td class='column2'>Column2 Row 7</td>
        <td class='column3'>Column3 Row 7</td>
        <td class='column4'>Column4 Row 7</td>
    </tr><tr class='t_row'>
        <td class='column1'>Column1 Row 8</td>
        <td class='column2'>Column2 Row 8</td>
        <td class='column3'>Column3 Row 8</td>
        <td class='column4'>Column4 Row 8</td>
    </tr><tr class='t_row'>
        <td class='column1'>Column1 Row 9</td>
        <td class='column2'>Column2 Row 9</td>
        <td class='column3'>Column3 Row 9</td>
        <td class='column4'>Column4 Row 9</td>
    </tr><tr class='t_row'>
        <td class='column1'>Column1 Row 10</td>
        <td class='column2'>Column2 Row 10</td>
        <td class='column3'>Column3 Row 10</td>
        <td class='column4'>Column4 Row 10</td>
    </tr>
<!--
<?php
$data = array();
for($a = 0; $a<50; $a++)
{
    $data[$a] = array();
    $data[$a][0] = "Column1 Row ".$a;
    $data[$a][1] = "Column2 Row ".$a;
    $data[$a][2] = "Column3 Row ".$a;
    $data[$a][3] = "Column4 Row ".$a;
}
/*
 ** supose you have data in an array.. which red from database. The table will draw using array data. Or you can draw the table manualy.
 ** tip: If using manual table, No need of
 ** 'var x = document.getElementsByClassName(object); var y = x[0].clientWidth;'.
 ** You can just set ID of first row's cells in to some name and use it to read width.
 */
for($i=0;$i<sizeof($data);$i++){
    echo "<tr class='t_row'><td class='column1'>".$data[$i][0]."</td><td class='column2'>".$data[$i][1]."</td><td class='column3'>".$data[$i][2]."</td><td class='column4'>".$data[$i][3]."</td></tr>";
}
?>
-->
</table>
</div>
</body>
</html>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top