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