001.<STYLE TYPE="TEXT/CSS">
002. div#tbl-container{
003. height: 200px;
004. overflow: auto;
005. }
006.
007. thead th, thead th.locked{
008. font-weight: bold;
009. text-align: center;
010. background-color: #ADC1CE;
011. position:relative;
012. cursor: default;
013. }
014.
015. thead th {
016. top: expression(document.getElementById("tbl-container").scrollTop-2);
017. z-index: 20;
018. }
019.
020. thead th.locked {z-index: 30;}
021.
022. td.locked, th.locked{
023. left: expression(document.getElementById("tbl-container").scrollLeft);
024. position: relative;
025. z-index: 10;
026. }
027.</STYLE>
028.
029.
030. <DIV id="tbl-container">
031. <TABLE BORDER="1" WIDTH="586" id="tbl">
032. <THEAD>
033. <TR>
034. <TH width="100">a</TH>
035. <TH width="129">b</TH>
036. <TH width="132">c</TH>
037. <TH width="197">d</TH>
038. </TR>
039. </THEAD>
040. <TBODY>
041. <TR>
042. <TD>1</TD>
043. <TD> </TD>
044. <TD> </TD>
045. <TD> </TD>
046. </TR>
047. <TR>
048. <TD>2</TD>
049. <TD> </TD>
050. <TD> </TD>
051. <TD> </TD>
052. </TR>
053. <TR>
054. <TD>3</TD>
055. <TD> </TD>
056. <TD> </TD>
057. <TD> </TD>
058. </TR>
059. <TR>
060. <TD>4</TD>
061. <TD> </TD>
062. <TD> </TD>
063. <TD> </TD>
064. </TR>
065. <TR>
066. <TD>5</TD>
067. <TD> </TD>
068. <TD> </TD>
069. <TD> </TD>
070. </TR>
071. <TR>
072. <TD>6</TD>
073. <TD> </TD>
074. <TD> </TD>
075. <TD> </TD>
076. </TR>
077. <TR>
078. <TD>7</TD>
079. <TD> </TD>
080. <TD> </TD>
081. <TD> </TD>
082. </TR>
083. <TR>
084. <TD>8</TD>
085. <TD> </TD>
086. <TD> </TD>
087. <TD> </TD>
088. </TR>
089. <TR>
090. <TD>9</TD>
091. <TD> </TD>
092. <TD> </TD>
093. <TD> </TD>
094. </TR>
095. <TR>
096. <TD>10</TD>
097. <TD> </TD>
098. <TD> </TD>
099. <TD> </TD>
100. </TR>
101. </TABLE>
102. </DIV>
