(so che il messaggio è un po' lungo... se volete saltare la parte descrittiva, il punto dove vado al sodo è evidenziato più avanti)
Salve a tutti,
premetto che ho effettuato una ricerca di anteriorità sul forum e, nonostante il mio problema risulti simile ad altri già trattati in precedenza, non ho trovato alcuna discussione in grado di darmi una mano a risolverlo.
Devo realizzare una pagina che mostri in forma tabellare all'utente il risultato di una interrogazione SQL ad un database.
Il layout della pagina prevede un DIV centrale avente dimensione fissa al cui interno si trova la tabella contenente le informazioni derivanti dalla query sul database.
Tale tabella è dotata di un header THEAD, un corpo TBODY e un footer TFOOT. Il numero di colonne è sempre noto a priori, mentre il numero di righe è ovviamente dipendente dall'interrogazione effettuata (eventualmente 0); THEAD e TFOOT contengono invece sempre una riga ciascuno.
Quello che avviene spesso è che la tabella da mostrare sia troppo grande per essere completamente visualizzabile nel DIV: vi possono essere molte righe, così come i dati estratti possono rendere molto larghe le colonne. In questi casi devo quindi necessariamente utilizzare una scrollbar orizzontale ed una verticale.
* Problema *
Giungiamo al problema. La combinazione di effetti che vorrei realizzare (e che mi sta creando parecchi grattacapi) è:
- mantenere THEAD e TFOOT ancorati al bordo - rispettivamente - alto e basso del DIV contenitore in presenza di uno scrolling verticale, ma in grado di spostarsi all'occorrenza di uno scrolling orizzontale. (In altre parole: lo scroller verticale deve agire solo sul TBODY, lo scroller orizzontale sulla tabella completa);
- i due scroller devono trovarsi lungo i bordi del DIV: se applicassi "separatamente" lo scorrimento orizzontale al DIV e lo scorrimento verticale al TBODY, quest'ultima scrollbar si posizionerebbe a destra, nella parte inizialmente non visibile della tabella.
Le due soluzioni che ho provato finora sono state:
- utilizzare tre tabelle distinte, una per il THEAD, una per il TBODY e una per il TFOOT e provvedere a dimensionarle a runtime tramite una funzione Javascript (dato che non posso conoscere a priori la loro larghezza). Operazioni fallita, le colonne risultanti non vengono allineate correttamente fra loro.
- creare un handler onScroll per ricollocare THEAD e TFOOT nella posizione voluta in risposta all'evento di scrolling, "contrastando" così lo spostamento che ne deriverebbe. Effettivamente questa soluzione funziona, ma l'effetto grafico ottenuto è davvero troppo scadente (header e footer si riposizionano "a scatti") per poter essere utilizzato.
Segnalo che la pagina che sto realizzando è di tipo JSP e che mi è stato esplicitamente richiesto di sviluppare per Internet Explorer 6 (lo so, è triste ma è così).
Qualcuno ha qualche altra idea su come realizzare quanto ho descritto?
Vi anticipo un grazie

Rispondi quotando