Scrolling Table with Fix Columns stop working after adding onmouseover event

M

MrCode2k

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:eek:range;
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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
HTML Table Issue 1
Having trouble centering contents of td ? 3
Can anyone please help? HTML - two tables applying different styles 4
Filter table rows based on multiple checkboxes value 2
Help with Visual Lightbox: Scripts 2
Image shifts to the right when export the page to pdf 4
Uncaught ReferenceError: item is not defined at HTMLButtonElement.onclick in the: <button onclick="item.inserir()">Inserir dados</button> 1

Members online

No members online now.
Total: 30 (members: 0, guests: 30)
Robots: 320

Forum statistics

Threads
473,755
Messages
2,569,536
Members
45,007
Latest member
obedient dusk

Latest Threads

Top