Hello,
Trying to do: I just want a table that I can scroll and that has fixed
headers.
Problem: I got it to work but when I added the onmouseover event it
didn't work anymore.
Replicate-Problem: Scrolldown the textbox and put the mouse over a row.
The headers will move up.
<!--HERE'S THE CODE -->
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Testing</title>
<style>
.Header_Row
{
position:relative;
}
tr.Header_Row th
{
background-color:#6495c2;
height:15px;
font-size: 11px;
color: white;
font-family: Verdana;
font-weight:bold;
border-right: black 1px solid;
border-top: white 1px solid;
border-left: white 1px solid;
border-bottom: black 1px solid;
}
.Primary_Data_Row {}
tr.Primary_Data_Row td
{
height:10px;
border-bottom:black 1px solid;
background-color:white;
font-size: 11px;
color: black;
font-family: Verdana;
border-right: black 1px dashed;
}
.Secondary_Data_Row {}
tr.Secondary_Data_Row td
{
height:10px;
border-bottom:black 1px solid;
background-color:whitesmoke;
font-size: 11px;
color: black;
font-family: Verdana;
border-right: black 1px dashed;
}
tr.Mouse_Over_Data_Row td
{
cursor:hand;
background-color:orange;
font-size: 11px;
color: blue;
text-decoration: underline;
font-family: Verdana;
border-right: black 1px dashed;
}
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br
/>
<div style="border: 1px solid black;height:100px;overflow:
auto;width: 270px">
<table cellspacing="0" cellpadding="2" rules="all" border="1"
id="ctl00_msp_Content_Holder_hdr_Test"
style="border-collapse:collapse;">
<tr class="Header_Row">
<th scope="col">Tape Date</th><th
scope="col">Deal Name</th>
</tr>
<tr class="Primary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Primary_Data_Row'">
<td style="width:100px;">2006-02-02</td><td
style="width:150px;">TESTING0</td>
</tr><tr class="Secondary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Secondary_Data_Row'">
<td style="width:100px;">2006-02-03</td><td
style="width:150px;">TESTING1</td>
</tr><tr class="Primary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Primary_Data_Row'">
<td style="width:100px;">2006-02-04</td><td
style="width:150px;">TESTING2</td>
</tr><tr class="Secondary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Secondary_Data_Row'">
<td style="width:100px;">2006-02-05</td><td
style="width:150px;">TESTING3</td>
</tr><tr class="Primary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Primary_Data_Row'">
<td style="width:100px;">2006-02-06</td><td
style="width:150px;">TESTING4</td>
</tr><tr class="Secondary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Secondary_Data_Row'">
<td style="width:100px;">2006-02-07</td><td
style="width:150px;">TESTING5</td>
</tr><tr class="Primary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Primary_Data_Row'">
<td style="width:100px;">2006-02-08</td><td
style="width:150px;">TESTING6</td>
</tr><tr class="Secondary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Secondary_Data_Row'">
<td style="width:100px;">2006-02-09</td><td
style="width:150px;">TESTING7</td>
</tr><tr class="Primary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Primary_Data_Row'">
<td style="width:100px;">2006-02-10</td><td
style="width:150px;">TESTING8</td>
</tr><tr class="Secondary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Secondary_Data_Row'">
<td style="width:100px;">2006-02-11</td><td
style="width:150px;">TESTING9</td>
</tr><tr class="Primary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Primary_Data_Row'">
<td style="width:100px;">2006-02-12</td><td
style="width:150px;">TESTING10</td>
</tr><tr class="Secondary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Secondary_Data_Row'">
<td style="width:100px;">2006-02-13</td><td
style="width:150px;">TESTING11</td>
</tr><tr class="Primary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Primary_Data_Row'">
<td style="width:100px;">2006-02-14</td><td
style="width:150px;">TESTING12</td>
</tr><tr class="Secondary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Secondary_Data_Row'">
<td style="width:100px;">2006-02-15</td><td
style="width:150px;">TESTING13</td>
</tr><tr class="Primary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Primary_Data_Row'">
<td style="width:100px;">2006-02-16</td><td
style="width:150px;">TESTING14</td>
</tr><tr class="Secondary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Secondary_Data_Row'">
<td style="width:100px;">2006-02-17</td><td
style="width:150px;">TESTING15</td>
</tr><tr class="Primary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Primary_Data_Row'">
<td style="width:100px;">2006-02-18</td><td
style="width:150px;">TESTING16</td>
</tr><tr class="Secondary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Secondary_Data_Row'">
<td style="width:100px;">2006-02-19</td><td
style="width:150px;">TESTING17</td>
</tr><tr class="Primary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Primary_Data_Row'">
<td style="width:100px;">2006-02-20</td><td
style="width:150px;">TESTING18</td>
</tr><tr class="Secondary_Data_Row"
onmouseover="this.className='Mouse_Over_Data_Row'"
onmouseout="this.className='Secondary_Data_Row'">
<td style="width:100px;">2006-02-21</td><td
style="width:150px;">TESTING19</td>
</tr>
</table>
</div>
</body>
</html>
Thank you in advance,
H
