Come creare una tabella, che è più larga delle dimensioni dello schermo, scorrevole e mantenere fissa la riga di intestazione?

Ho un table con 2 colonne e ogni colonna è larga 800 px. Voglio mostrare questa tabella nella finestra 800x50. Quindi dovrebbe esserci una barra di scorrimento orizzontale e verticale per visualizzare la tabella completa.Come creare una tabella, che è più larga delle dimensioni dello schermo, scorrevole e mantenere fissa la riga di intestazione?

Mentre ho trovato alcune soluzioni correlate (this e this) su SO, funzionano solo se la larghezza della tabella è inferiore alla dimensione dello schermo. Nel mio caso la dimensione dello schermo è di 1200px e la larghezza totale della tabella è 1600px.

Come posso fare questo? Voglio raggiungere qualcosa come this.

EDIT Oops, ho dimenticato di aggiungere un altro requisito. Scusate. Voglio che l'intestazione della tabella rimanga fissa mentre l'utente scorre la tabella.

EDIT2

Ho provato soluzioni sotto indicati per avvolgere in un div, ma in questo caso barra di scorrimento verticale non viene visualizzata. Si prega di vedere this table con wrapper div. Sembra che questo problema si verifica solo se la larghezza della tabella è maggiore della dimensione dello schermo. Sto testando su FF3.6.

Edit3

codice corrente table. Questo non ha scroller verticale anche se posso scorrere verticalmente.

<div style="overflow:scroll; width:800px;height:50px" > 
<table style="width:1600px" border="1"> 
    <thead> 
    <tr> 
     <th style="width:800px">id_1</th> 
     <th style="width:800px">id_1</th> 
    </tr> 
    </thead> 
    <tbody style=""> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    <tr><td>1200</td><td>1200</td></tr> 
    </tbody> 
</table> 
</div>

fonte

2010-04-13 understack

Mi dispiace, ma è una dimensione 800x50 inutilizzabile. Gli Scrollbars occupano da soli circa 20px, il che ti lascia circa 30px con cui giocare ... quindi chiedi ai tuoi utenti di scorrere con una o due righe visibili alla volta? Certo, non intendevi 800x500? – Robusto

Questi sono numeri falsi, voglio solo far funzionare questo tavolo e quindi modificare le dimensioni di conseguenza. – understack

È possibile avvolgere la tabella in un div che ha una dimensione fissa (800x50) e impostare overflow:scroll.

fonte

2010-04-13 18:38:59

@Vivin Paliath: non vedo lo scroll verticale con questo quando la lunghezza della tabella è maggiore della dimensione dello schermo. Per favore vedi questo: http://jsbin.com/uwubu3/3 – understack

Vedo bene le barre di scorrimento quando lo apro. Intendi la dimensione della finestra? Se la tabella è più grande della dimensione della finestra, sarà necessario scorrere l'intera pagina per visualizzare le barre di scorrimento. Non c'è modo di spostarsi per ridimensionare il tuo tavolo alla dimensione della finestra. –

Non vedo neanche le barre di scorrimento, ma credo che sia perché la tua altezza è troppo piccola. Prova a impostare l'altezza a 100 px e funzionerà correttamente. –

Metti la tua tavola in un div con larghezza di < 800, e impostare overflow: scroll.

fonte

2010-04-13 18:38:44

Non so se funzionerebbe, ma hai provato a impostare max-width: 100% per la pagina?

fonte

2010-04-13 18:40:13 animuson

Basta aggiungere overflow:scroll al css del tuo elemento tabella. Btw. il tuo esempio non mostra nessuno scorrimento.

fonte

2010-04-13 18:41:11

@Paul de Vrieze: corretto l'esempio. Ora mostra lo scorrimento ma solo orizzontale. – understack

Se si desidera che l'intestazione di rimanere fisso basta fare un po 'di CSS

#header { 
    position:fixed; 
    left:0; 
    top:0; 
}

fonte

2010-04-13 18:58:23 Catfish

Come creare una tabella, che è più larga delle dimensioni dello schermo, scorrevole e mantenere fissa la riga di intestazione?

risposta

Problemi correlati