tabella con scrollbar e riga di intestazione fissa

[grendy]

Salve a tutti,
come dal titolo, quello che voglio realizzare è una tabella con scrollbar con la riga di intestazione fissa

posto il codice scritto finora:

<STYLE type="text/css" media="screen">
    #container {
        border: solid 1px black;
        overflow: auto;
    }
    
    .noScroll {
        position:relative;
        top:expression(this.offsetParent.scrollTop); 
        background-color:white;
        font-family: Arial, Helvetica, sans-serif;
    }
    
    TH {
	    text-align: left;
	    background-color: #D4D0C8;
    	border-style: solid;
	    border-width: 1px;
	    border-color: #FFFFFF #808080 #808080 #FFFFFF;
	}
	
	td {
		border-color: #C0C0C0; 
		border-right-style: solid; 
		border-right-width: 1px;
		border-bottom-style: solid; 
		border-bottom-width: 1px;
	}
</STYLE>


<div id="container" style="width: 300px; height: 143px;">
    <table border="0" cellpadding="0" cellspacing="0" style="width: 100%">
        <thead>
            <tr class="noScroll">
                <TH>Col 1</TH>
				<TH>Col 2</TH>
				<TH>Col 3</TH>

				<TH>Col 4</TH>
				<TH>Col 5</TH>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td bgcolor="#FFFFFF">1</td>

				<td bgcolor="#FFFFFF">2</td>
				<td bgcolor="#FFFFFF">3</td>
				<td bgcolor="#FFFFFF">4</td>
				<td bgcolor="#FFFFFF">5</td>
			</tr>
			<tr>
                <td bgcolor="#FFFFFF">1</td>

				<td bgcolor="#FFFFFF">2</td>
				<td bgcolor="#FFFFFF">3</td>
				<td bgcolor="#FFFFFF">4</td>
				<td bgcolor="#FFFFFF">5</td>
			</tr>
			<tr>
                <td bgcolor="#EEF6FF">1</td>

				<td bgcolor="#EEF6FF">2</td>
				<td bgcolor="#EEF6FF">3</td>
				<td bgcolor="#EEF6FF">4</td>
				<td bgcolor="#EEF6FF">5</td>
			</tr>
			<tr>
                <td bgcolor="#FFFFFF">1</td>

				<td bgcolor="#FFFFFF">2</td>
				<td bgcolor="#FFFFFF">3</td>
				<td bgcolor="#FFFFFF">4</td>
				<td bgcolor="#FFFFFF">5</td>
			</tr>
			<tr>
                <td bgcolor="#FFFFFF">1</td>

				<td bgcolor="#FFFFFF">2</td>
				<td bgcolor="#FFFFFF">3</td>
				<td bgcolor="#FFFFFF">4</td>
				<td bgcolor="#FFFFFF">5</td>
			</tr>
			<tr>
                <td bgcolor="#EEEEEE">1</td>

				<td bgcolor="#EEEEEE">2</td>
				<td bgcolor="#EEEEEE">3</td>
				<td bgcolor="#EEEEEE">4</td>
				<td bgcolor="#EEEEEE">5</td>
			</tr>
			<tr>
                <td bgcolor="#FFFFFF">1</td>

				<td bgcolor="#FFFFFF">2</td>
				<td bgcolor="#FFFFFF">3</td>
				<td bgcolor="#FFFFFF">4</td>
				<td bgcolor="#FFFFFF">5</td>
			</tr>
			<tr>
                <td bgcolor="#FFFFFF">1</td>

				<td bgcolor="#FFFFFF">2</td>
				<td bgcolor="#FFFFFF">3</td>
				<td bgcolor="#FFFFFF">4</td>
				<td bgcolor="#FFFFFF">5</td>
			</tr>
			<tr>
                <td bgcolor="#EEF6FF">1</td>

				<td bgcolor="#EEF6FF">2</td>
				<td bgcolor="#EEF6FF">3</td>
				<td bgcolor="#EEF6FF">4</td>
				<td bgcolor="#EEF6FF">5</td>
			</tr>
			<tr>
                <td bgcolor="#FFFFFF">1</td>

				<td bgcolor="#FFFFFF">2</td>
				<td bgcolor="#FFFFFF">3</td>
				<td bgcolor="#FFFFFF">4</td>
				<td bgcolor="#FFFFFF">5</td>
			</tr>
			<tr>
                <td bgcolor="#FFFFFF">1</td>

				<td bgcolor="#FFFFFF">2</td>
				<td bgcolor="#FFFFFF">3</td>
				<td bgcolor="#FFFFFF">4</td>
				<td bgcolor="#FFFFFF">5</td>
			</tr>
			<tr>
                <td bgcolor="#EEEEEE">1</td>

				<td bgcolor="#EEEEEE">2</td>
				<td bgcolor="#EEEEEE">3</td>
				<td bgcolor="#EEEEEE">4</td>
				<td bgcolor="#EEEEEE">5</td>
			</tr>
			<tr>
                <td bgcolor="#FFFFFF">1</td>

				<td bgcolor="#FFFFFF">2</td>
				<td bgcolor="#FFFFFF">3</td>
				<td bgcolor="#FFFFFF">4</td>
				<td bgcolor="#FFFFFF">5</td>
			</tr>
			<tr>
                <td bgcolor="#FFFFFF">1</td>

				<td bgcolor="#FFFFFF">2</td>
				<td bgcolor="#FFFFFF">3</td>
				<td bgcolor="#FFFFFF">4</td>
				<td bgcolor="#FFFFFF">5</td>
			</tr>
        </tbody>
    </TABLE>

</div>

per chi vuole vedere l'esempio ecco il link

solo che cosi scrolla tutta la tabella, anche la riga di intestazione.

sono arrivato a questo risultato in sole 4 ore, inutile dire che ho bisogno d'aiuto.

[Vincent.Zeno]

La funzione è correttamente supportata da IE, ma non da FF.

Forse la soluzione sta nel dividere il tutto in due tabelle diverse

[grendy]

e per il Firefox, nessuso sa come fare????

[grendy]

La soluzione di dividere il tutto in due tabelle, l'ho scartata, in quanto, al cambiare della larghezza delle colonne della seconda tabella, non cambia la larghezza delle colonne della prima.
Di conseguenza mi ritrovo due tabelle indipendenti.
Ad fissare una larghezza per le colonne delle due tabelle c'ho rinunciato.
Ho modificato il codice un pò e questo è il nuovo risultato.
Adesso la riga di intestazione rimane fissa anche per il firefox, se guardate il codice si vede subito il trucco.
Solo dovrei eliminare la scrollbar orizontale
Nessuno ha una soluzione migliore da suggerirmi?

[Vincent.Zeno]

hai postato il link sbaglito.....

[grendy]

timeout per modificare il vecchio post
ecco il link .

[grendy]

Dopo sole altre due ore di tempo su sta tabella ... mi son detto, faccio un giro su sorceforge e vediam cosa trovo.
Ecco un risultato che sembra promettere bene
http://sourceforge.net/projects/activeui.
L'unica pecca è che il progetto sembra abbandonato, il download risale al 17 Maggio 2004.
Sembra perchè se si visita l'homepage http://www.activewidgets.com/, si trova un download aggiornato a 12 Dicembre 2005.
Ecco il link del download
http://www.activewidgets.com/downloa...-1.0.2-gpl.zip

Gli dò una guardatina e vediamo se fa tutto quello che mi serve.