Salve a tutti,
vi sottopongo il seguente problema legato a IE.
Ho una pagina HTML in cui ho una tabella contenuta in un DIV con barre di scorrimento automatiche (OVERFLOW: AUTO). Ho fissato la prima riga della tabella utilizzando il seguente stile "TOP: expression(this.offsetParent.scrollTop)".
La pagina funziona correttamente se utilizzo HTML standard; ovvero l'intestazione della tabella rimane fissa rispetto allo scorrimento verticale del DIV mentre si comporta normalmente rispetto allo scorrimento orizzontale.
Tuttavia se invece utilizzo XHTML (aggiungendo nella prima riga della pagina HTML la seguente sintassi "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">") la pagina non funziona correttamente; ovvero in caso di overflow orizzontale del DIV, l'intestazione della tabella rimane visibile in primo piano sopra al DIV e rimane bloccata anche rispetto allo scorrimento orizzontale.
Per chiarire ciò che voglio dire di seguito riporto il codice HTML completo che mostra un esempio:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
</head>
</head>
<body>
<div id="div1" Style="Height:130px; border:2px green solid; Width:300px; overflow:auto;">
<table style="border:1px red solid; border-collapse:collapse; width:400px;">
<tr style="Z-INDEX: 1; POSITION: relative; TOP: expression(this.offsetParent.scrollTop);">
<td style="border:1px red solid; background-color:Yellow;">tablecell_c0
</td>
<td style="border:1px red solid; background-color:Yellow;">tablecell_c1
</td>
<td style="border:1px red solid; background-color:Yellow;">tablecell_c2
</td>
</tr>
<tr>
<td style="border:1px red solid;">tablecell_3
</td>
<td style="border:1px red solid;">tablecell_4
</td>
<td style="border:1px red solid;">tablecell_5
</td>
</tr>
<tr>
<td style="border:1px red solid">tablecell_6
</td>
<td style="border:1px red solid">tablecell_7
</td>
<td style="border:1px red solid">tablecell_8
</td>
</tr>
<tr>
<td style="border:1px red solid">tablecell_9
</td>
<td style="border:1px red solid">tablecell_10
</td>
<td style="border:1px red solid">tablecell_11
</td>
</tr>
<tr>
<td style="border:1px red solid">tablecell_12
</td>
<td style="border:1px red solid">tablecell_13
</td>
<td style="border:1px red solid">tablecell_14
</td>
</tr>
<tr>
<td style="border:1px red solid">tablecell_12
</td>
<td style="border:1px red solid">tablecell_13
</td>
<td style="border:1px red solid">tablecell_14
</td>
</tr>
<tr>
<td style="border:1px red solid">tablecell_12
</td>
<td style="border:1px red solid">tablecell_13
</td>
<td style="border:1px red solid">tablecell_14
</td>
</tr>
</table>
</div>
</body>
</html>
Grazie.
Mic
vi sottopongo il seguente problema legato a IE.
Ho una pagina HTML in cui ho una tabella contenuta in un DIV con barre di scorrimento automatiche (OVERFLOW: AUTO). Ho fissato la prima riga della tabella utilizzando il seguente stile "TOP: expression(this.offsetParent.scrollTop)".
La pagina funziona correttamente se utilizzo HTML standard; ovvero l'intestazione della tabella rimane fissa rispetto allo scorrimento verticale del DIV mentre si comporta normalmente rispetto allo scorrimento orizzontale.
Tuttavia se invece utilizzo XHTML (aggiungendo nella prima riga della pagina HTML la seguente sintassi "<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">") la pagina non funziona correttamente; ovvero in caso di overflow orizzontale del DIV, l'intestazione della tabella rimane visibile in primo piano sopra al DIV e rimane bloccata anche rispetto allo scorrimento orizzontale.
Per chiarire ciò che voglio dire di seguito riporto il codice HTML completo che mostra un esempio:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
</head>
</head>
<body>
<div id="div1" Style="Height:130px; border:2px green solid; Width:300px; overflow:auto;">
<table style="border:1px red solid; border-collapse:collapse; width:400px;">
<tr style="Z-INDEX: 1; POSITION: relative; TOP: expression(this.offsetParent.scrollTop);">
<td style="border:1px red solid; background-color:Yellow;">tablecell_c0
</td>
<td style="border:1px red solid; background-color:Yellow;">tablecell_c1
</td>
<td style="border:1px red solid; background-color:Yellow;">tablecell_c2
</td>
</tr>
<tr>
<td style="border:1px red solid;">tablecell_3
</td>
<td style="border:1px red solid;">tablecell_4
</td>
<td style="border:1px red solid;">tablecell_5
</td>
</tr>
<tr>
<td style="border:1px red solid">tablecell_6
</td>
<td style="border:1px red solid">tablecell_7
</td>
<td style="border:1px red solid">tablecell_8
</td>
</tr>
<tr>
<td style="border:1px red solid">tablecell_9
</td>
<td style="border:1px red solid">tablecell_10
</td>
<td style="border:1px red solid">tablecell_11
</td>
</tr>
<tr>
<td style="border:1px red solid">tablecell_12
</td>
<td style="border:1px red solid">tablecell_13
</td>
<td style="border:1px red solid">tablecell_14
</td>
</tr>
<tr>
<td style="border:1px red solid">tablecell_12
</td>
<td style="border:1px red solid">tablecell_13
</td>
<td style="border:1px red solid">tablecell_14
</td>
</tr>
<tr>
<td style="border:1px red solid">tablecell_12
</td>
<td style="border:1px red solid">tablecell_13
</td>
<td style="border:1px red solid">tablecell_14
</td>
</tr>
</table>
</div>
</body>
</html>
Grazie.
Mic
