Ciao a tutti,
ho una pagina HTML che visualizza una griglia con la prima colonna e la prima riga bloccata. La tabella contiene molte righe e molte colonne
voglio fare in modo che sulla pagina HTML si apra una finestra con una scroll-bar verticale e una orizzontale agendo su tali scroll bar riesco a
visualizzare tutte le colonne.

Di seguito riportato la pagina HTML e il foglio di stile

Il problema è che con il tag: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
la griglia con le caratteristiche sopra riportata non funziona togliendolo funziona e purtroppo non posso levarlo.


Qualcuno ha qualche idea.

Ringrazio tutti anticipatamente


Riporto il documento HTML********************************************** ******************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-1\">
<title>DUMBO System</title>
<link href="./styles/<nome foglio>.css" rel="stylesheet" type="text/css" ></link>
</head>
<body>
<div id="tbl-container">
<table class='grid'>
<thead>
<tr><th class='lockedHeadLine' style='width:35px'>&nbsp</th>
<th style='width:150px'>A</th>
......
</tr>
</thead>
<tbody>
<tr>
<td class='lockedBorderLine'>1</td>
<td>prova</td>
...
</tr>
<tr>
.. ...
</tr>

</tbody>
</table>
</div>
</body>
</html>

Riporto il foglio HTML********************************************** ******************
div#tbl-container { width: 100%;
height: 350px;
overflow: auto;
scrollbar-base-color:#ffeaff;
border: 2px solid #7f9db9;
}

div#tbl-container table.grid { table-layout: fixed;
border-collapse: collapse;
background-color: WhiteSmoke;
color: black;
}

div#tbl-container thead th { height:20px;
background-color: #d6d2c2;
border-top: 4px solid #ffffff;
border-right: 2px solid #666666;
border-bottom: 2px solid #666666;
font-size: 12px;
font-weight: bold;
text-align: center;
position:relative;
cursor: default;
top: expression(parentNode.parentNode.parentNode.parent Node.scrollTop-2); /* IE5+ only */
z-index: 20;
}

div#tbl-container thead th.lockedHeadLine { left: expression(parentNode.parentNode.parentNode.parent Node.scrollLeft); /* IE5+ only */
z-index: 30;
}

div#tbl-container td { position:relative;
cursor: default;
background-color: WhiteSmoke;
border-right: 1px solid silver;
border-bottom: 1px solid silver;
font-size: 13px;
}

div#tbl-container td.lockedBorderLine { font-size: 12px;
font-weight: bold;
text-align: center;
background-color: #d6d2c2;
border-top: 2px solid #ffffff;
border-right: 2px solid #666666;
border-bottom: 2px solid #666666;
left: expression(parentNode.parentNode.parentNode.parent Node.scrollLeft); /* IE5+ only */
z-index: 10;
}