By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
443,627 Members | 2,244 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 443,627 IT Pros & Developers. It's quick & easy.

Table with Fixed Header not working after adding an onmouseover event

P: n/a
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

Feb 2 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
MrCode2k wrote:
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.


I don't think the problem has anything to do with the onmouseover - if
it did, the proper place to ask would be comp.lang.javascript. Even
after removing all the scripting, your 'fixed header' doesn't work for
me in any browser.

More likely your problem is CSS, in which case ask in
comp.infosystems.www.authoring.stylesheets

In the meantime, the table here seems to be what you are trying to
replicate:

<URL:http://www.imaputz.com/cssStuff/bigFourVersion.html>

[...]
--
Rob
Feb 3 '06 #2

P: n/a
Rob,

Thanks for your response.
The reason why the fixed header was not working was because the first
line was missing from the code. Sorry.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

If you copy and paste the HTML from the url you submited and the add an
onmouseover event to a row that you have to scroll to get to, you will
also see the problem that, I'm having.

Thanks,

H

Feb 3 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.