Header tabella fisso

[Shagrat]

Ciao a tutti, spareste consigliarmi un link in cui trovare il modo di rendere fisso l'header di una tabella mentre il contenuto scrolla con la pagina?

grazie

[salasir]

Intendi qualcosa del genere?
CSS
div#contenitore{min-height:100px; height:auto!important; height:100px;}
div#tabella {height:560px; overflow:auto

HTML
<div id="contenitore">
<table>
<tr>
<th width=30px>Tit</th>
<th width=130px>Titolo</th>
<th width=40px>Tit 3</th>
<th width=230px>Tit 4</th>
</tr>
</table>
<div id="tabella">
<table>
<tr>
<td width=30px>val 1</td>
<td width=130px>val 2 </td>
<td width=40px>val 3</td>
<td width=230px>val 4</td>
</tr>
</table>
</div>
</div>

[Shagrat]

a dire il vero il codice che mi hai postato tu a me si composta come una tabella normale (magari ho sbagliato io) se l'ultima riga della tabella è all'esterno dell'area visualizzabile e scrollola pagina l'intestazione della tabella scompare...

[Mich_]

Il codice di salasir contiene un errore sintattico e manca di un elemento di scroll.

L'errore sintattico perche` rende con due tabelle quello che in realta` e` una tabella. Questo ha implicazioni gravi per l'accessibilita` ed inoltre in caso di problemi di larghezza le colonne potrebbero venir disallineate.

L'idea comunque era di mettere una altezza massima al <div id="tabella"> e definire overflow:scroll; nei CSS.

La soluzione corretta (non so quanto sia implementata dai browser attuali) e` fare una tabella unica, definire l'intestazione coni tag corretti (<th> e <thead>), raggruppare le altre righe in un <tbody> e dare quindi altezza massima e overflow:scroll; al <tbody>.

[Shagrat]

scusa ma di css non è che sia proprio un maestro (anzi..) cosa intendi per "altezza massima"? in altre parole cosa dovrei scrivere nel tbody oltre a

<tbody style="overflow:scroll;">

?

[salasir]

Sicuramente non è una soluzione molto elegante, ma a me sembrava funzionare.
Chiaramente se si usa la scrollbar della pagina la testata scompare, ma se le righe superano l'area impostata si visualizza una scrollbar nella tabella che ti consente di mantenere la posizione della pagina (una specie di iframe per intenderci).

Comunque se si riesce a realizzare la soluzione di Mich_, può essere interessante per alcuni utilizzi. Ho provato a impostare la tabella secondo le sue indicazioni ma non funziona. Sicuramente ho sbagliato qualcosa.

[Mich_]

Dipende da cosa c'e` fuori.

In linea di massima (per browser conformi) puoi mettere uno dei seguenti:
max-height: 80%;
max-height: 30em;
max-height: 400px; /* non valido per pagine accesibili */

Oppure puoi limitare l'altezza tramite un blocco che contiene la tabella, oppure la tabella stessa.

Nota peraltro che il browser IE non supporta il max-height, per cui occorre lavorare con gli hack (vedi "link utili")

[andrea.paiola]

dai miei "esperimenti" (pochi) sulle tabelle e CSS no notato che purtroppo IE non permette lo scroll (overflow:scroll) direttamente sulle celle delle tabelle e si è costretti a inserire div per farlo funzionare...