Come posso lasciare scorrere il corpo di un tavolo ma mantenere la testa fissa in posizione?

148

Sto scrivendo una pagina in cui ho bisogno di una tabella HTML per mantenere una dimensione impostata. Ho bisogno che le intestazioni nella parte superiore della tabella rimangano sempre lì, ma ho anche bisogno che il corpo della tabella scorra, indipendentemente da quante righe vengono aggiunte alla tabella. Pensa a una versione mini di Excel. Sembra un compito semplice ma quasi tutte le soluzioni che ho trovato sul web presentano alcuni svantaggi. Come posso risolvere questo?

javascript  html  css  html-table 
— menta
fonte
2
ci sono molti esempi là fuori. questo è uno di questi .
— Darren Kopp,
Devo scegliere come target IE6, IE7, FF, ... ma sfortunatamente IE, sfortunatamente
— menta,
Ci sono molti hack CSS all'interno. Dovrebbe essere banale iniziare a lavorare in IE7.
— Jim,
4
Sono interessato alla risposta per tutti i browser!
— menta,
15
"Dovrebbe essere banale iniziare a lavorare in IE7." Jim, sei tu? Sei il mio project manager? :)
— Aaronio il

Risposte:

53

Ho dovuto trovare la stessa risposta. Il miglior esempio che ho trovato è http://www.cssplay.co.uk/menu/tablescroll.html - ho trovato che l'esempio n. 2 ha funzionato bene per me. Dovrai impostare l'altezza della tabella interna con Java Script, il resto è CSS.

— Ken Penn
fonte
3
sfortunatamente, questo metodo fallisce quando si dispone di una tabella ampia (scorrimento orizzontale). Avrai due barre di scorrimento orizzontali; uno per l'intestazione e uno per i dati.
— vol7ron,
4
la tua soluzione non funziona se non specifichi <th> larghezza all'interno di <thead>
— Alexandru R
2
Per rispettare gli standard (relativamente) nuovi di Stack Overflow, potresti modificare questa risposta per includere i bit rilevanti dal link?
— Fondi Monica's Lawsuit,
Dov'è la fonte, Billy?
— Candelabro
È impossibile sincronizzare le larghezze di colonna tra l'intestazione e il corpo della tabella (scorrevole) senza ricorrere a JavaScript o valori predefiniti.
— Rustyx,
12

Ho visto l' eccellente soluzione di Sean Haddy a una domanda simile e mi sono preso la libertà di apportare alcune modifiche :

  • Utilizzare le classi anziché l'ID, quindi uno script jQuery può essere riutilizzato per più tabelle su una pagina
  • Aggiunto supporto per gli elementi della 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ù corte" dell'altezza scorrevole
  • Larghezza del div a scorrimento regolata per portare la barra di scorrimento sul bordo destro della tabella
  • Concetto reso accessibile da
    • utilizzando aria-hidden = "true" sull'intestazione della tabella statica iniettata
    • e lasciando al suo posto l'originale thead, appena nascosto con jQuery e set aria-hidden="false"
  • Vengono mostrati esempi di più tabelle con dimensioni diverse

Sean ha fatto il sollevamento pesante, però. Grazie anche a Matt Burland per aver sottolineato la necessità di sostenere il piede.

Si prega di vedere di persona su http://jsfiddle.net/jhfrench/eNP2N/

— Jeromy francese
fonte
Bene, ma rovina se vuoi un'intestazione e un piè di pagina!
— Matt Burland,
3
Grazie Matt, ho apportato le modifiche.
— Jeromy francese
L'allineamento deve essere modificato se si mostrano i bordi td e th.
— dhochee,
8

Hai provato a usare la testa e il corpo e a impostare un'altezza fissa sul corpo con troppo pieno: scroll?

Quali sono i tuoi browser target?

EDIT: Ha funzionato bene (quasi) in Firefox - l'aggiunta della barra di scorrimento verticale ha causato anche la necessità di una barra di scorrimento orizzontale - schifo. IE ha appena impostato l'altezza di ogni td su quello che avevo specificato l'altezza del corpo per essere. Ecco il meglio che potrei inventare:

<html>
    <head>
    <title>Blah</title>
    <style type="text/css">
    table { width:300px; }
    tbody { height:10em;  overflow:scroll;}
    td { height:auto; }
    </style>
    </head>
    <body>
    <table>
        <thead>
            <tr>
              <th>One</th><th>Two</th>
              </td>
            </tr>
        </thead>
        <tbody>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
            <tr><td>Data</td><td>Data</td></tr>
        </tbody>
    </table>
    </body>
</html>
— Chris Marasti-Georg
fonte
1
Ho bisogno di indirizzare IE6, IE7, FF, ... ma soprattutto IE purtroppo
— di menta
Cambia la tabella in modo che sia inferiore al 100% in larghezza, diciamo il 99% e dovrebbe occuparsi del problema
— WolfmanDragon
2
overflow-x: hidden;e overflow-y: autoanche aiutare.
— appena
7
Questo funzionava in Firefox, ed è il codice ovvio e non cludgy. Tuttavia, nelle versioni più recenti di Firefox, è rotto.
— Rasmus Kaj,
6
Questo non funziona perché "overflow" è applicabile solo ai "contenitori di blocchi" ( w3.org/TR/CSS21/visufx.html#overflow ) e le caselle di tabella non sono "contenitori di blocchi" ( w3.org/TR/CSS21/ visuren.html # block-box ).
— mhsmith,
8

Ciò di cui hai bisogno è:

1) avere un corpo di tabella di altezza limitata poiché lo scorrimento si verifica solo quando il contenuto è più grande della finestra di scorrimento. Tuttavia, tbodynon è possibile ridimensionare e devi visualizzarlo come blockper farlo:

tbody {
   overflow-y: auto;
   display: block;
   max-height: 10em;    // For example
}

2) Risincronizza le larghezze delle colonne dell'intestazione della tabella e del corpo della tabella , rendendola blockun elemento non correlato. L'unico modo per farlo è simulare la sincronizzazione applicando la stessa larghezza di colonne a entrambi .

Tuttavia, poiché di per tbodysé è un blockora, non può più comportarsi come un table. Dato che hai ancora bisogno di un tablecomportamento per visualizzare correttamente le tue colonne, la soluzione è chiedere che ciascuna delle tue righe venga visualizzata come singola tables:

thead {         
   display: table;  
   width: 100%;     // Fill the containing table
}
tbody tr {
   display: table;
   width: 100%;     // Fill the containing table
}

(Nota che, usando questa tecnica, non sarai più in grado di attraversare più righe).

Fatto ciò, puoi imporre che le larghezze delle colonne abbiano la stessa larghezza in entrambi theade tbody. Non potresti che:

  • individualmente per ogni colonna (attraverso specifiche classi CSS o stile in linea), che è abbastanza noioso da fare per ogni istanza di tabella;
  • uniformemente per tutte le colonne (fino th, td { width: 20%; }ad esempio se hai 5 colonne), il che è più pratico (non è necessario impostare la larghezza per ogni istanza della tabella) ma non può funzionare per il conteggio delle colonne
  • uniformemente per ogni conteggio delle colonne, attraverso un layout di tabella fisso.

Preferisco l'ultima opzione, che richiede l'aggiunta di:

thead {
   table-layout: fixed;   // Same layout for all cells
}
tbody tr {
   table-layout: fixed;   // Same layout for all cells
}
th, td {
   width: auto;   // Same width for all cells, if table has fixed layout
}

Guarda una demo qui , biforcuta dalla risposta a questa domanda .

— Javarome
fonte
Grazie per la spiegazione. È allettante il modo in cui si può fare qualcosa del genere e la maggior parte delle risposte presenta solo un po 'di codice e un link plunkr, lasciandoti a capirlo da solo.
— Paul Rooney,
4

Modifica:   questa è una risposta molto antica ed è qui per prosperità solo per dimostrare che era supportato una volta negli anni 2000 ma abbandonato perché la strategia dei browser negli anni 2010 doveva rispettare le specifiche del W3C anche se alcune funzionalità fossero state rimosse: tabella scorrevole con intestazione fissa / footer è stato goffamente specificato prima di HTML5.

Cattive notizie

Sfortunatamente non esiste un modo elegante per gestire la tabella scorrevole con fisso thead/ tfoot perché le specifiche HTML / CSS non sono molto chiare su quella funzione .

spiegazioni

Anche se HTML 4.01 Specification dice thead/ tfoot/ tbodyvengono utilizzati per corpo della tabella di scorrimento (introdotto?):

Le righe della tabella possono essere raggruppate [...] utilizzando gli elementi THEAD, TFOOT e TBODY [...]. Questa divisione consente agli interpreti di supportare lo scorrimento dei corpi del tavolo indipendentemente dalla testa e dal piede del tavolo.

Ma la funzionalità della tabella scorrevole funzionante su FF 3.6 è stata rimossa in FF 3.7 perché considerata un bug perché non conforme alle specifiche HTML / CSS. Vedi questo e quello commenti sui bug di FF.

Suggerimento per la rete di sviluppatori Mozilla

Di seguito è riportata una versione semplificata dei suggerimenti utili di MDN per la tabella scorrevole,
consultare questa pagina archiviata o la versione francese corrente

<style type="text/css">
table {
  border-spacing: 0;              /* workaround */
}
tbody {
  height: 4em;                    /* define the height */
  overflow-x: hidden;             /* esthetics */
  overflow-y: auto;               /* allow scrolling cells */
}
td {
  border-left:   1px solid blue;  /* workaround */
  border-bottom: 1px solid blue;  /* workaround */
}
</style>

<table>
    <thead><tr><th>Header
    <tfoot><tr><th>Footer
    <tbody>
        <tr><td>Cell 1    <tr><td>Cell 2
        <tr><td>Cell 3    <tr><td>Cell 4
        <tr><td>Cell 5    <tr><td>Cell 6
        <tr><td>Cell 7    <tr><td>Cell 8
        <tr><td>Cell 9    <tr><td>Cell 10
        <tr><td>Cell 11   <tr><td>Cell 12
        <tr><td>Cell 13   <tr><td>Cell 14
    </tbody>
</table>

Tuttavia MDN dice anche che questo non funziona più su FF :-(
Ho anche testato su IE8 => la tabella non è neanche scorrevole: - (((

— olibre
fonte
I suggerimenti MDN per il collegamento della tabella scorrevole non sono informazioni pertinenti che parlano del collasso dei bordi. Forse la pagina è cambiata perché sono passati 5 anni
— partizanos
Grazie @partizanos ho finalmente trovato la pagina wiki originale nella storia di MDN! La mia vecchia risposta sembra ormai obsoleta, ma per la prosperità la prossima generazione di sviluppatori saprà che era possibile e facile da implementare negli anni 2000 ;-) Cin cin
— olibre
3

Non sono sicuro che qualcuno lo stia ancora guardando, ma il modo in cui l'ho già fatto in precedenza è usare due tabelle per visualizzare la singola tabella originale: la prima solo la riga del titolo della tabella originale e nessuna riga del corpo della tabella (o una riga del corpo vuota da creare convalida).

Il secondo è in un div separato e non ha titolo e solo le righe del corpo della tabella originale. Il div separato viene quindi reso scorrevole.

La seconda tabella nel suo div è posizionata appena sotto la prima tabella nell'HTML e sembra una singola tabella con un'intestazione fissa e una sezione inferiore scorrevole. L'ho provato solo su Safari, Firefox e IE (le ultime versioni di ognuna nella primavera del 2010) ma ha funzionato in tutte.

L'unico problema che aveva era che la prima tabella non sarebbe stata validata senza un body (validatore W3.org - XHTML 1.0 rigoroso), e quando ne ho aggiunto uno senza contenuto provoca una riga vuota. Puoi usare i CSS per renderlo non visibile ma occupa ancora spazio nella pagina.

— Mick
fonte
In che modo la riga aggiuntiva occuperebbe spazio? Non è necessario occupare spazio sullo schermo se si utilizza display: none;, a meno che non si intenda lo spazio nella sorgente ..?
— ClarkeyBoy,
3

Questa soluzione funziona in Chrome 35, Firefox 30 e IE 11 (non testate altre versioni)

Il suo puro CSS: http://jsfiddle.net/ffabreti/d4sope1u/

Tutto è impostato per la visualizzazione: blocco, tabella ha bisogno di un'altezza:

    table {
        overflow: scroll;
        display: block;    /*inline-block*/
        height: 120px;
    }
    thead > tr  {
        position: absolute;
        display: block;
        padding: 0;
        margin: 0;
        top: 0;
        background-color: gray;
    }
    tbody > tr:nth-of-type(1) {
        margin-top: 16px;
    }
    tbody tr {
        display: block;
    }

    td, th {
        width: 70px;
        border-style:solid;
        border-width:1px;
        border-color:black;
    }
— Fernando Fabreti
fonte
2

Questo mi ha causato enormi mal di testa nel tentativo di implementare una griglia del genere per un'applicazione nostra. Ho provato tutte le varie tecniche là fuori, ma ognuna ha avuto problemi. Il più vicino a me è stato usando un plugin jQuery come Flexigrid (guarda su http://www.ajaxrain.com per le alternative), ma questo non sembra supportare tabelle larghe al 100% che è ciò di cui avevo bisogno.

Quello che ho finito per fare è stato il mio; Firefox supporta gli tbodyelementi di scorrimento , quindi ho sniffato il browser e ho usato CSS appropriati (impostazione altezza, overflow ecc ... chiedi se vuoi maggiori dettagli) per fare quello scroll, e poi per altri browser ho usato due tabelle separate table-layout: fixedche usano un dimensionamento algoritmo che è garantito per non traboccare le dimensioni dichiarate (le tabelle normali si espandono quando il contenuto è troppo ampio per adattarsi). Dando a entrambe le tabelle larghezze identiche sono stato in grado di allineare le loro colonne. Ho avvolto il secondo in un set div per scorrere e con un po 'di scherzosa pokery con margini ecc. Sono riuscito a ottenere l'aspetto e la sensazione che volevo.

Scusate se questa risposta suona un po 'vaga in alcuni punti; Sto scrivendo velocemente perché non ho molto tempo. Lascia un commento se mi vuoi espandere ulteriormente!

— Luke Bennett
fonte
Mi dispiace resuscitare questo vecchio thread, ma ho davvero bisogno di sapere come hai risolto il problema. Ho fatto funzionare FF ma non i browser IE / WebKit. Aiutatemi quando potete.
— Alfero Chingono,
2

Ecco un codice che funziona davvero per IE e FF (almeno):

<html>
<head>
    <title>Test</title>
    <style type="text/css">
        table{
            width: 400px;
        }
        tbody {
            height: 100px;
            overflow: scroll;
        }
        div {
            height: 100px;
            width: 400px;
            position: relative;
        }
        tr.alt td {
            background-color: #EEEEEE;
        }
    </style>
    <!--[if IE]>
        <style type="text/css">
            div {
                overflow-y: scroll;
                overflow-x: hidden;
            }
            thead tr {
                position: absolute;
                top: expression(this.offsetParent.scrollTop);
            }
            tbody {
                height: auto;
            }
        </style>
    <![endif]--> 
</head>
<body>
    <div >
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th style="background: lightgreen;">user</th>
                    <th style="background: lightgreen;">email</th>
                    <th style="background: lightgreen;">id</th>
                    <th style="background: lightgreen;">Y/N</th>
                </tr>
            </thead>
            <tbody align="center">
                <!--[if IE]>
                    <tr>
                        <td colspan="4">on IE it's overridden by the header</td>
                    </tr>
                <![endif]--> 
                <tr>
                    <td>user 1</td>
                    <td>user@user.com</td>
                    <td>1</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 2</td>
                    <td>user@user.com</td>
                    <td>2</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 3</td>
                    <td>user@user.com</td>
                    <td>3</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 4</td>
                    <td>user@user.com</td>
                    <td>4</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 5</td>
                    <td>user@user.com</td>
                    <td>5</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 6</td>
                    <td>user@user.com</td>
                    <td>6</td>
                    <td>N</td>
                </tr>
                <tr>
                    <td>user 7</td>
                    <td>user@user.com</td>
                    <td>7</td>
                    <td>Y</td>
                </tr>
                <tr class="alt">
                    <td>user 8</td>
                    <td>user@user.com</td>
                    <td>8</td>
                    <td>N</td>
                </tr>
            </tbody>
        </table>
    </div>
</body></html>

Ho modificato il codice originale per renderlo più chiaro e anche per farlo funzionare bene in IE e anche FF ..

Codice originale QUI

— Daniel Costa
fonte
1
In IE7 / 8 funziona solo in modalità Quirks e smette di funzionare non appena aggiungi un tipo di documento, ad es.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
— ccpizza
1

Ecco la mia alternativa. Utilizza inoltre DIV diversi per l'intestazione, il corpo e il piè di pagina ma sincronizzati per il ridimensionamento della finestra e con la ricerca, lo scorrimento, l'ordinamento, il filtro e il posizionamento:

I miei elenchi di CD

Fai clic sui pulsanti Jazz, Classica ... per visualizzare le tabelle. È impostato in modo che sia adeguato anche se JavaScript è disattivato.

Sembra OK su IE, FF e WebKit (Chrome, Safari).

— goneill
fonte
1

Spiacenti, non ho letto tutte le risposte alla tua domanda.

Sì, ecco quello che vuoi (l'ho già fatto)

Puoi usare due tabelle, con lo stesso nome di classe per uno stile simile, una solo con la testa della tabella e un'altra con le tue righe. Ora metti questa tabella all'interno di un div con altezza fissa con overflow-y: auto OR scroll.

— Sanuj
fonte
1

Il problema principale che ho avuto con i suggerimenti di cui sopra era la possibilità di collegare tablesorter.js E di essere in grado di float le intestazioni per una tabella vincolata a una dimensione massima specifica. Alla fine mi sono imbattuto nel plugin jQuery.floatThead che ha fornito le intestazioni mobili e ha permesso all'ordinamento di continuare a funzionare.

Ha anche una bella pagina di confronto che mostra se stessa contro plugin simili .

— Guy Hollington
fonte
1

Live JsFiddle

È possibile solo con HTML e CSS

table.scrollTable {
  border: 1px solid #963;
  width: 718px;
}

thead.fixedHeader {
  display: block;
}

thead.fixedHeader tr {
  height: 30px;
  background: #c96;
}

thead.fixedHeader tr th {
  border-right: 1px solid black;
}

tbody.scrollContent {
  display: block;
  height: 262px;
  overflow: auto;
}

tbody.scrollContent td {
  background: #eee;
  border-right: 1px solid black;
  height: 25px;
}

tbody.scrollContent tr.alternateRow td {
  background: #fff;
}

thead.fixedHeader th {
  width: 233px;
}

thead.fixedHeader th:last-child {
  width: 251px;
}

tbody.scrollContent td {
  width: 233px;
}
<table cellspacing="0" cellpadding="0" class="scrollTable">
  <thead class="fixedHeader">
    <tr class="alternateRow">
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody class="scrollContent">
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>And Repeat 1</td>
      <td>And Repeat 2</td>
      <td>And Repeat 3</td>
    </tr>
    <tr class="normalRow">
      <td>Cell Content 1</td>
      <td>Cell Content 2</td>
      <td>Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>More Cell Content 1</td>
      <td>More Cell Content 2</td>
      <td>More Cell Content 3</td>
    </tr>
    <tr class="normalRow">
      <td>Even More Cell Content 1</td>
      <td>Even More Cell Content 2</td>
      <td>Even More Cell Content 3</td>
    </tr>
    <tr class="alternateRow">
      <td>End of Cell Content 1</td>
      <td>End of Cell Content 2</td>
      <td>End of Cell Content 3</td>
    </tr>
  </tbody>
</table>
Espandi frammento

— Md. Rafee
fonte
0

Se è ok per usare JavaScript ecco la mia soluzione Crea una tabella imposta larghezza fissa su tutte le colonne (pixel!) Aggiungi la classe Scrollify alla tabella e aggiungi questo javascript + jquery 1.4.x imposta l'altezza in CSS o Style!

Testato in: Opera, Chrome, Safari, FF, IE5.5 ( Epic script fail ), IE6, IE7, IE8, IE9

//Usage add Scrollify class to a table where all columns (header and body) have a fixed pixel width
$(document).ready(function () {
    $("table.Scrollify").each(function (index, element) {
        var header = $(element).children().children().first();
        var headerHtml = header.html();
        var width = $(element).outerWidth();
        var height = parseInt($(element).css("height")) - header.outerHeight();
        $(element).height("auto");
        header.remove();
        var html = "<table style=\"border-collapse: collapse;\" border=\"1\" rules=\"all\" cellspacing=\"0\"><tr>" + headerHtml +
                         "</tr></table><div style=\"overflow: auto;border:0;margin:0;padding:0;height:" + height + "px;width:" + (parseInt(width) + scrollbarWidth()) + "px;\">" +
                         $(element).parent().html() + "</div>";

        $(element).parent().html(html);
    });
});


//Function source: http://www.fleegix.org/articles/2006-05-30-getting-the-scrollbar-width-in-pixels
//License: Apache License, version 2
function scrollbarWidth() {
    var scr = null;
    var inn = null;
    var wNoScroll = 0;
    var wScroll = 0;

    // Outer scrolling div
    scr = document.createElement('div');
    scr.style.position = 'absolute';
    scr.style.top = '-1000px';
    scr.style.left = '-1000px';
    scr.style.width = '100px';
    scr.style.height = '50px';
    // Start with no scrollbar
    scr.style.overflow = 'hidden';

    // Inner content div
    inn = document.createElement('div');
    inn.style.width = '100%';
    inn.style.height = '200px';

    // Put the inner div in the scrolling div
    scr.appendChild(inn);
    // Append the scrolling div to the doc
    document.body.appendChild(scr);

    // Width of the inner div sans scrollbar
    wNoScroll = inn.offsetWidth;
    // Add the scrollbar
    scr.style.overflow = 'auto';
    // Width of the inner div width scrollbar
    wScroll = inn.offsetWidth;

    // Remove the scrolling div from the doc
    document.body.removeChild(
        document.body.lastChild);

    // Pixel width of the scroller
    return (wNoScroll - wScroll);
}

Modifica: altezza fissa.

— Peter
fonte
0

Lo faccio con javascript (nessuna libreria) e CSS - il corpo della tabella scorre con la pagina e la tabella non deve essere fissa in larghezza o altezza, sebbene ogni colonna debba avere una larghezza. Puoi anche mantenere la funzionalità di ordinamento.

Fondamentalmente:

  1. In HTML, crea div contenitore per posizionare la riga dell'intestazione della tabella e il corpo della tabella, crea anche una div "maschera" per nascondere il corpo della tabella mentre scorre oltre l'intestazione

  2. In CSS, converti le parti della tabella in blocchi

  3. In Javascript, ottieni la larghezza della tabella e abbina la larghezza della maschera ... ottieni l'altezza del contenuto della pagina ... misura la posizione di scorrimento ... manipola CSS per impostare la posizione della riga dell'intestazione della tabella e l'altezza della maschera

Ecco il javascript e una DEMO jsFiddle.

// get table width and match the mask width

function setMaskWidth() { 
  if (document.getElementById('mask') !==null) {
    var tableWidth = document.getElementById('theTable').offsetWidth;

    // match elements to the table width
    document.getElementById('mask').style.width = tableWidth + "px";
   }
}

function fixTop() {

  // get height of page content 
  function getScrollY() {
      var y = 0;
      if( typeof ( window.pageYOffset ) == 'number' ) {
        y = window.pageYOffset;
      } else if ( document.body && ( document.body.scrollTop) ) {
        y = document.body.scrollTop;
      } else if ( document.documentElement && ( document.documentElement.scrollTop) ) {
        y = document.documentElement.scrollTop;
      }
      return [y];
  }  

  var y = getScrollY();
  var y = y[0];

  if (document.getElementById('mask') !==null) {
      document.getElementById('mask').style.height = y + "px" ;

      if (document.all && document.querySelector && !document.addEventListener) {
        document.styleSheets[1].rules[0].style.top = y + "px" ;
      } else {
        document.styleSheets[1].cssRules[0].style.top = y + "px" ;
      }
  }

}

window.onscroll = function() {
  setMaskWidth();
  fixTop();
}
— Deborah
fonte
Ma nella tua demo l'intestazione della tabella non rimane, scorre semplicemente via. (Chrome qui.)
— Sz.
Non lo vedo in Chrome. Sei sicuro di non confondere le celle evidenziate in giallo con le istruzioni in rosso per l'intestazione? Le celle dell'intestazione sono in alto e sono grigie su grigio ("Col 1", "Col 2", ecc.).
— Deborah,
0

Per me, nulla di legato allo scorrimento ha funzionato fino a quando non ho rimosso la larghezza dalla tabella CSS. Inizialmente, la tabella CSS era simile alla seguente:

.table-fill {
    background: white;
    border-radius:3px;
    border-collapse: collapse;
    margin: auto;
    width: 100%;
    max-width: 800px;
    padding:5px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
    animation: float 5s infinite;
}

Non appena ho rimosso la larghezza: 100%; tutte le funzioni di scorrimento hanno iniziato a funzionare.

— Matthew Park
fonte
0

Se hai standard abbastanza bassi;) puoi posizionare una tabella che contiene solo un'intestazione direttamente sopra una tabella che ha solo un corpo. Non scorrerà in senso orizzontale, ma se non ti serve ...

— M610
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.