tabella con scroll

**Kandalf** · 29-09-2009, 11:48

Ciao,

avrei bisogno di usare una classica tabella in html ma con la possibilità di tenere sempre l'intestazione allineata e visualizzare il contenuto tramite la scroll bar.
Ne ho usata una ma funziona solo con IE e con delle tabelle più complesse sbaglia il calcolo dell'area libera nella pagina.
Cmq quella che è usato è questa.

http://www.codeproject.com/KB/script...ble_table.aspx

Volevo sapere se qualcuno ha avuto la stessa mia necessità e come ha risolto.

**ricman** · 29-09-2009, 13:19

Se sai impaginare i tuoi dati puoi procedere così

**Kandalf** · 29-09-2009, 13:56

L'unica cosa che non mi convince che bisogna usare 2 tabelle separate e poi magari nn si allieano bene...ora provo grazie.

**ricman** · 29-09-2009, 14:40

Originariamente inviato da Kandalf
L'unica cosa che non mi convince che bisogna usare 2 tabelle separate e poi magari nn si allieano bene...ora provo grazie.

Infatti ho scritto (come anche nel blog) che devi saper impaginare i dati. Proprio perchè le misure sono in px per non sperdere l'impaginazione.
Penso sia fattibile anche in percentuale ma bisognerebbe perderci un po' di tempo...

**Kandalf** · 29-09-2009, 15:02

Con Firefox basterebbe questo per gestirlo:

Codice PHP:




<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">

<html>

<head>

<title>Scrolling Table Body</title>

<style type="text/css">

table.scroll {

height: 50px;

overflow: scroll;

}

table.scroll tbody {

height: 300px;

overflow-y: auto;

overflow-x: hidden;

}

table.scroll tbody tr, table.scroll tbody td {

height: auto;

}

</style>

</head>

<body>

<table class="scroll">

<thead>

<tr>

<th>HeaderAAAAAAAAAAAA</th>

<th>Header 2</th>

<th>Header 3</th>

<th width="15"></th>

</tr>

</thead>



<tbody>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

<td>Row 1, Cell 3</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

<td>Row 2, Cell 3</td>

</tr>

<tr>

<td>Row 3, Cell 1</td>

<td>Row 3, Cell 2</td>

<td>Row 3, Cell 3</td>

</tr>

<tr>

<td>Row 4, Cell 1</td>

<td>Row 4, Cell 2</td>

<td>Row 4, Cell 3</td>

</tr>

</tbody>

</table>

</body>

</html>

**miki003** · 29-09-2009, 17:12

C'è un modo per risolvere il problema, abbastanza semplice: facendo la struttura esterna tabella e thesd con codice html e inserendo i dati con javascript, (document.write()), il che garantisce uno scroll con tutti i browser

**ricman** · 30-09-2009, 04:30

Occhio all'accessibilità...

**Kandalf** · 30-09-2009, 09:12

Non ho problemi di accessibilità visto che mi serve per un'applicazine in intranet.

Visto che la pagina e la relativa tabella è già costruita e abbastanza complessa e piena di dati mi serviva un modo più veloce possibile. Quello che ho trovato nel link per adesso è quelo migliore anche se andrebbe rivisto.

**miki003** · 30-09-2009, 12:37

Originariamente inviato da ricman
Occhio all'accessibilità...

Ti do ragione quando c'è di mezzo javascript, l'accessibilità è sempre precaria, ma come si dice quando ce vo ce vo, poi per te che sei un cultore di ajax e jquery, non dovrebbe impressionare

**ricman** · 30-09-2009, 13:37

Originariamente inviato da miki003
Ti do ragione quando c'è di mezzo javascript, l'accessibilità è sempre precaria, ma come si dice quando ce vo ce vo, poi per te che sei un cultore di ajax e jquery, non dovrebbe impressionare

Occhio al CULtOre ...

Il mio culto è volto più al codice puro con css e qualche foto...

Vabbè... leggo che è per una intranet... quindi non possibilità di sbagliare su chi usa il suo programmino.
Quindi ok... andate col javascript...

Discussione: tabella con scroll

Strumenti discussione

Ricerca discussione

Visualizza

tabella con scroll

Permessi di invio