49
Hello people, I could do with a little help.. I have been piecing some code together to make a table with a fixed header and that has light up rows. I thought id got it but I notice when i scroll down and the put the cursor over and row poof goes the header, also I couldn't seem to get the spacing off the header cells even when deleting all spacings throughout the code. If you could please help that would be great. :) [html]
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Clickabl e Rows in Tables</title>
<style type="text/css">
/* fixedHeader is the class of THEAD and TR is the property */
thead.fixedHead er tr
{
position: absolute;
}
/* Sets the attribute for TH property. Watch out for the TH here. It is used instead of TD. */
thead.fixedHead er td
{
border-left: #eb8 1px solid;
border-right: #b34 1px solid;
border-top: #eb8 1px solid;
font-weight: bold;
/* Change the color code here to change the fixed header's background color */
background: #c56;
/* #fff is the color code for the fixed header's font */
color: #fff;
/* you can use 'justify', 'left', 'right' or 'center' here */
text-align: center
}
tr.hovered { background:Peac hPuff; cursor: pointer;} /*hover effect */
/* makes tableContainer Class of DIV */
div.tableContai ner
{
clear: both;
overflow: auto;
/* Sets the BORDER properties */
border: #000 1px solid;
/* Sets Width and Height of the container */
width: 616px;
height: 300px;
}
div.tableContai ner table
{
cellspacing: 0px;
float: left;
width: 600px;
height: 100%;
}
</style>
<script type="text/javascript">
function rowHover()
{
var tables=document .getElementsByT agName('table') ;
for (var i=0;i<tables.le ngth;i++)
{
var trs=tables[i].getElementsByT agName('tr');
for(var j=1, len=trs.length; j<len; j++)
{
trs[j].onmouseover=fu nction() { this.className= 'hovered'; }
trs[j].onmouseout=fun ction() { this.className= ''; }
}
}
}
window.onload = rowHover;
</script>
</head>
<body>
<div id="container" >
<div class="tableCon tainer">
<table>
<thead class="fixedHea der">
<tr>
<td width="28%">Sta tion</td>
<td width="28%">Dat e</td>
<td width="28%">Sta tus</td>
<td width="16%">Che ck</td>
</tr>
</thead>
<tbody>
<tr>
<td>KABC</td>
<td>09/12/2002</td>
<td>Submitted </td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>KCBS</td>
<td>09/11/2002</td>
<td>Lockdown</td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WFLA</td>
<td>09/11/2002</td>
<td>Submitted </td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WTSP</td>
<td>09/15/2002</td>
<td>In-Progress</td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WROC</td>
<td>10/11/2002</td>
<td>Submitted </td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WPPP</td>
<td>09/16/2002</td>
<td>In-Progress</td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WRRR</td>
<td>09/06/2002</td>
<td>Submitted </td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WTTT</td>
<td>09/21/2002</td>
<td>In-Progress</td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>W000</td>
<td>11/11/2002</td>
<td>Submitted </td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>KABC</td>
<td>10/01/2002</td>
<td>Submitted </td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>KCBS</td>
<td>10/18/2002</td>
<td>Lockdown</td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WFLA</td>
<td>10/18/2002</td>
<td>Submitted </td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WTSP</td>
<td>10/19/2002</td>
<td>In-Progress</td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WROC</td>
<td>07/18/2002</td>
<td>Submitted </td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WPPP</td>
<td>10/28/2002</td>
<td>In-Progress</td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WRRR</td>
<td>10/28/2002</td>
<td>Submitted </td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WTTT</td>
<td>10/08/2002</td>
<td>In-Progress</td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WIL0</td>
<td>10/18/2001</td>
<td>Submitted </td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>KABC</td>
<td>04/18/2002</td>
<td>Submitted </td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>KCBS</td>
<td>10/05/2001</td>
<td>Lockdown</td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
<tr>
<td>WFLA</td>
<td>10/18/2002</td>
<td>Submitted </td>
<td><input type='checkbox' name='sel' value=''></td>
</tr>
</tbody>
</table>
</div>
</div> <!-- end container -->
</body>
</html>
[/html]
