Rendi TBODY scorrevole nei browser Webkit

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

  •  06-07-2019
  •  | 
  •  

Domanda

Sono a conoscenza di questa domanda , ma nessuna delle risposte funziona in Safari, Chrome, ecc.

La strategia accettata ( come dimostrato qui ) è impostare l'altezza del corpo e le proprietà di overflow in questo modo: 

<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>

Sfortunatamente, questo non funziona in nessun browser webkit. Esiste una segnalazione di bug che non sembra essere elevata priorità (segnalato il 05 giugno).

Quindi la mia domanda è: ci sono strategie alternative che funzionano davvero? Ho provato l'approccio a due tabelle, ma è impossibile garantire che l'intestazione si allinei con il contenuto. Devo solo aspettare che Webkit lo risolva?

È stato utile?

Soluzione

Ecco un esempio funzionante:

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

Devi aggiungere il display: block al thead > tr & tbody

Altri suggerimenti

Uso del display: lo stile blocco funziona solo se hai 1 colonna. Se hai più colonne di dati - con più campi - quindi visualizza: il blocco appare per rendere scorrevoli tutte le colonne di dati ma sotto la 1a colonna (fa lo stesso in Firefox - che è l'unico browser che conosco che scorre in modo corretto). Per inciso, su Firefox: puoi usare lo stile overflow-x: hidden per sopprimere lo scorrimento orizzontale.

Ho capito che il problema che menziono si verifica solo se non si specifica una larghezza per l'amplificatore th &; td elements: se riesci a correggere la larghezza delle colonne, allora funziona. Il problema per me è che non riesco a correggere la larghezza delle colonne.

Prova il primo metodo di questa pagina, CSS puro con una singola tabella (2 div attorno alla tabella e la thead è posizionata in modo assoluto): http://www.cssplay.co.uk/menu/tablescroll.html Sembra funzionare su FF4 / IE9 / IE8 oltre a IE7 / FF3.6.

Ho avuto lo stesso problema e ho scritto uno script jQuery per fare questo per me ... usa due elementi di tabella e formatta il CSS di conseguenza. Spero che questo aiuti gli altri che hanno lo stesso problema ...

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

Ho visto la soluzione eccellente e ho preso la soluzione eccellente libertà di apportare alcune modifiche :

  • Utilizza le classi anziché l'ID, quindi è possibile riutilizzare uno script jQuery più tabelle su una pagina
  • Aggiunto supporto per gli elementi di tabella HTML semantici come didascalia, thead, tfoot e tbody
  • Ha reso la barra di scorrimento opzionale in modo che non venga visualizzata per le tabelle " più brevi " dell'altezza scorrevole
  • Larghezza del div a scorrimento modificata per portare la barra di scorrimento sul bordo destro della tabella
  • Concetto reso accessibile da
    • usando aria-hidden = " true " sull'intestazione della tabella statica iniettata
    • e lasciando in posizione il thead originale, appena nascosto con jQuery e impostato aria-hidden="false"
  • Esempi di più tabelle con dimensioni diverse

Sean ha comunque sollevato molto. Grazie anche a Matt Burland per aver sottolineato la necessità di sostenere il piede.

Consulta di persona http://jsfiddle.net/jhfrench/eNP2N/

A ha affrontato lo stesso problema molto tempo fa e alla fine ho definito l'approccio delle due tabelle. Questo è il risultato: http://jsfiddle.net/bGr4V/3/ , funziona per tutti browser (IE6 + incl).

In questo jsFiddle puoi giocare con una versione pulita.

La mia soluzione era quella di aggiungere una cella di correzione <th class="fix"> </th> in thead per riempire lo spazio della barra di scorrimento in tbody, quindi assegnare a una colonna una larghezza variabile (<td class="grow"> ), quindi l'intestazione correggi cella non corrisponderebbe al ridimensionamento.

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: ha * e _ hack per ie6-7 e un -webkit specifico per l'intestazione fix-cell corrispondente alla larghezza di scorrimento in ciascuno caso. 

.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 }
}

Ho pensato di aggiungere la mia soluzione al mix - http://tjvantoll.com/2012/11/10/creating-cross-browser-scrollable-tbody/ .

Prende lo stesso percorso di base della soluzione di @Michael Koper ma include una soluzione alternativa, quindi la tabella apparirà corretta in IE fino a IE6.

Risolvo il problema della larghezza assegnando <table> un table-layout: fixed e assegnando esplicitamente la larghezza alle celle di ciascuna colonna. Non è l'ideale ma produce una tabella semantica che allineerà il browser incrociato indipendentemente dal fatto che sia necessaria una barra di scorrimento.

Demo: http://codepen.io/tjvantoll/pen/JEKIu

Ho sviluppato una soluzione javascript per il problema precedente
che funziona solo in Firefox 7+ come ho testato solo in FF

Sono arrivato a questo thread e ho trovato la soluzione indicata da Michael Koper

In questa soluzione vengono fatte tre cose importanti
1) correggere la larghezza della colonna
2) thead & Gt; tr display è impostato per bloccare
3) il display del corpo è impostato per bloccare

come altri hanno menzionato il problema per correggere la larghezza, anch'io sono nella stessa posizione;
anche non posso sistemare la larghezza staticamente

quindi ho pensato di sistemare la larghezza in modo dinamico (dopo che la tabella è stata renderizzata nel browser) e questo ha fatto il trucco :)

di seguito è la soluzione in javascript che funziona solo in FF
(ho testato solo in FF, non ho accesso ad altri browser) 

       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";  
        }

Questa soluzione scopre qual è la larghezza della colonna dal browser
e imposta nuovamente la stessa larghezza sulle colonne (intestazione e prima riga del corpo)
dopo aver impostato la larghezza; thead > display tr e tbody impostato per bloccare

Spero che questa soluzione sia utile per tutti voi ..
se puoi estenderlo ad altri browser, rispondi a questo post

Questo è davvero piuttosto confuso ma forse aiuterà qualcuno da qualche parte ...

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

Utilizza le colonne anziché le righe, quindi l'elaborazione verrà essenzialmente eseguita al contrario.

DOCTYPE di transizione aggiunto per compatibilità IE.

Potrebbe essere eccessivo per questa domanda, ma YUI fornisce comunque probabilmente il miglior datatable cross-browser gratuito. Può essere utilizzato anche per dati di sola lettura.

Tabella dati YUI 2

Tabella dati YUI 3

Fai clic sugli esempi lì per vedere campioni scorrevoli. Da allora, sono un principiante di StackOverflow, posso solo pubblicare questi due link.

Aggiungi display:block; Questo rimuoverà anche lo scroll orizzontale non necessario anche in FireFox. Senza dubbio, sei anche consapevole che nessuno dei due esempi funziona in 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>

C'è un esempio qui che funziona in IE5 +, Firefox e Chrome. Tuttavia, utilizza colonne a larghezza fissa. http://www.cssplay.co.uk/menu/tablescroll.html

Se qualcuno ne ha bisogno per funzionare in modalità IE quirks, ecco come ho cambiato e semplificato I.G. Il codice di Pascual per funzionare: 

.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>

Lascia che la tabella sia disegnata nel modo in cui è, calcola la larghezza di ogni colonna e impostala su ciascuna intestazione. Le intestazioni sono composte da divisioni e quindi possiamo lasciare scorrere liberamente la tabella. 

<!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>
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top