471,594 Members | 2,562 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 471,594 software developers and data experts.

Header position on Table layout

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>Clickable Rows in Tables</title>




<style type="text/css">


/* fixedHeader is the class of THEAD and TR is the property */
thead.fixedHeader tr
{
position: absolute;

}



/* Sets the attribute for TH property. Watch out for the TH here. It is used instead of TD. */
thead.fixedHeader 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:PeachPuff; cursor: pointer;} /*hover effect */


/* makes tableContainer Class of DIV */
div.tableContainer
{
clear: both;
overflow: auto;

/* Sets the BORDER properties */
border: #000 1px solid;

/* Sets Width and Height of the container */
width: 616px;
height: 300px;
}


div.tableContainer table
{
cellspacing: 0px;
float: left;
width: 600px;
height: 100%;
}





</style>





<script type="text/javascript">

function rowHover()
{
var tables=document.getElementsByTagName('table');
for (var i=0;i<tables.length;i++)
{
var trs=tables[i].getElementsByTagName('tr');
for(var j=1, len=trs.length; j<len; j++)
{

trs[j].onmouseover=function() { this.className='hovered'; }
trs[j].onmouseout=function() { this.className=''; }
}
}
}

window.onload = rowHover;

</script>




</head>

<body>

<div id="container">



<div class="tableContainer">

<table>

<thead class="fixedHeader">
<tr>
<td width="28%">Station</td>
<td width="28%">Date</td>
<td width="28%">Status</td>
<td width="16%">Check</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]
Dec 4 '07 #1
15 2285
drhowarddrfine
7,435 Expert 4TB
There is no such standard color as "PeachPuff".
There is no such CSS property as 'cellspacing'.

That header you are positioning as 'absolute'. Absolute positioning removes that element from the normal flow allowing other elements to take its place. Just remove that positioning and the problem is solved unless there are other reasons to do that.

Why are you using the transitional doctype?
Dec 4 '07 #2
There is no such standard color as "PeachPuff".
There is no such CSS property as 'cellspacing'.

That header you are positioning as 'absolute'. Absolute positioning removes that element from the normal flow allowing other elements to take its place. Just remove that positioning and the problem is solved unless there are other reasons to do that.

Why are you using the transitional doctype?
The peachpuff was copied from a site and it works fine (peachy colour)

I got the impression from reading a tutorial that doctype was needed to used the absolute which is ment to keep the header in the same position. Ill have to remove the cellspacing variable see how that helps :s Its all abit of a guess at the moment. I am trying to emulate this table done here : http://home.tampabay.rr.com/bmerkey/examples/clickable-table-rows.html but the CSS isn't given.
Dec 4 '07 #3
I do hope if not just because I have been trying to do it in IE Mozilla makes it look so much sexier.
Dec 4 '07 #4
drhowarddrfine
7,435 Expert 4TB
I noticed 'peachypuff' works in Firefox, too, but it still isn't a standard color and I don't know which other browsers it would work in.
I got the impression from reading a tutorial that doctype was needed to used the absolute
A doctype is required for all web pages but 'transitional' is only for older pages when one is 'transitioning' from older deprecated markup to current standards. Otherwise, there is no need for the transitional one. See the article about doctypes under Howtos above.
Ill have to remove the cellspacing variable see how that helps
It won't hurt because browsers ignore it since it doesn't exist. Potentially, browsers will ignore your other markup up to the closing bracket.
the CSS isn't given.
You can view the CSS with the web developer toolbar extension in Firefox, or Firebug (also in Firefox).
I do hope if not just because I have been trying to do it in IE
Never, ever use IE to design a web page. All versions are old, buggy and 10 years behind current web standards. Always, always use a modern browser, such as Firefox, Opera or Safari to test your page. Then you can adjust for IEs quirks and bugs because they are known, as are the hacks.

The problem you are having is still related to the absolute positioning and I don't see a need for it.
Dec 4 '07 #5
drhowarddrfine
7,435 Expert 4TB
I just looked at the link to the example page. That guy is not using a doctype, therefore he is coding in 'quirks mode'. You can read about 'quirks' under Howtos above, also. I would also be wary of what that guy is showing. It may need to be fixed/adjusted for modern standards.
Dec 4 '07 #6
drhowarddrfine
7,435 Expert 4TB
After even more review, that guy is doing a good job overall but he is playing to 'quirks' which is a Microsoft bug. Because he's coding to a bug, he tries to fix Firefox when IE is the real problem.

The colors he uses are non-standard. There are a couple of other things I could nitpick about but I won't.
Dec 4 '07 #7
drhowarddrfine
7,435 Expert 4TB
And after even more further review, I looked at the guy's homepage where he does talk of how bad IE is at standards compliance and how much he supports standards so I don't understand why he created the page that way.
Dec 4 '07 #8
Death Slaught
1,137 1GB
Absolute positioning removes that element from the normal flow
Just wanted to make this clear. When something has a position of 'absolute' it isn't removed from the normal flow of the page, it's completely removed from it's flow. I'm sure that's what you ment was that the float property is removed from the normal flow of the page.

I know this isn't really all that important, but alot of people don't relize that absolute position does this, therefor confuse themselves even further.

Thanks, Death
Dec 4 '07 #9
drhowarddrfine
7,435 Expert 4TB
huh? You're not removing it, you're completely removing it? Kinda the same thing. The same with floats.

EDIT: Maybe I understand what you are saying. Absolutely positioned elements are completely removed from the flow while floated elements are removed also, however, text and elements will wrap around the contents of the floated element but they will not with abs pos.
Dec 5 '07 #10
I have managed to get the look I was after with the light up rows and fixed header. I was forced to put the header into its own seperate table and then putting that table outside of the scrollable div. No idea how they managed to put their header into the scrollable div and keep it at the same position though, the mind boggles. HTML has to be first in my list of hated programming languages, things are just impossible to get fully modualised and everything effects everything in strange and wonderful ways(im sure if the font was changed by a little the header would appear at the bottom of the screen and the body would turn orange and sink by 4 times).
Dec 5 '07 #11
Death Slaught
1,137 1GB
huh? You're not removing it, you're completely removing it? Kinda the same thing. The same with floats.

EDIT: Maybe I understand what you are saying. Absolutely positioned elements are completely removed from the flow while floated elements are removed also, however, text and elements will wrap around the contents of the floated element but they will not with abs pos.
Yeah that's what I ment.

Thanks, Death
Dec 5 '07 #12
Death Slaught
1,137 1GB
I have managed to get the look I was after with the light up rows and fixed header. I was forced to put the header into its own seperate table and then putting that table outside of the scrollable div. No idea how they managed to put their header into the scrollable div and keep it at the same position though, the mind boggles. HTML has to be first in my list of hated programming languages, things are just impossible to get fully modualised and everything effects everything in strange and wonderful ways(im sure if the font was changed by a little the header would appear at the bottom of the screen and the body would turn orange and sink by 4 times).
Well then I'm sure that you'll be glad to know that HTML isn't really considered a programming langauge.


Thanks, Death
Dec 5 '07 #13
I knew you were going to say that. Was going to change it but couldn't think what sort of language it was. People can be pretty anal about the absolute specifics to an extent where it hinders efficent conversation.
Dec 5 '07 #14
drhowarddrfine
7,435 Expert 4TB
It is a "markup". A markup language describes the content but does not and cannot change it, while a programming language can manipulate and change the data. A markup language has no functions that execute and cannot do anything by itself.
Dec 5 '07 #15
Could I have you opinions on the colour scheme and overall look of my table?

HTML:

[HTML]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">


<html>
<head>
<link rel="stylesheet" href="testcss.css" type="text/css">
<title>Clickable Rows in Tables</title>









<script type="text/javascript">

function rowHover()
{

rowShader();

var tables=document.getElementsByTagName('table');
for (var i=0;i<tables.length;i++)
{
if(tables[i].className.match("dataTable"))
{
var trs=tables[i].getElementsByTagName('tr');
for(var j=0, len=trs.length; j<len; j++)
{

trs[j].onmouseover=function() { this.className='hovered'; }
if(trs[j].className=="shaded")
{
trs[j].onmouseout=function() { this.className="shaded"; }
}
else
{
trs[j].onmouseout=function() { this.className="normal"; }
}
}
}
}
}


function rowShader()
{
var tables=document.getElementsByTagName('table');
for (var i=0;i<tables.length;i++)
{
if(tables[i].className.match("dataTable"))
{
var trs=tables[i].getElementsByTagName('tr');
for(var j=0, len=trs.length; j<len; j++)
{
if(j%2)
{
trs[j].className="shaded";
}
else
{
trs[j].className="normal";
}
}
}
}
}






window.onload = rowHover;

</script>


</head>

<body>


<div class="tableContainer">
<table class="headerTable">

<thead class="fixedHeader">
<tr>
<th class="col1">Station</th>
<th class="col2">Date</th>
<th class="col3">Status</th>
<th class="col4">Check</th>

</tr>
</thead>
</table>

<div class="tableDataContainer">

<table class="dataTable">
<tbody>
<tr>
<td class="col1">KABC</td>
<td class="col2">09/12/2002</td>
<td class="col3">Submitted</td>
<td class="col4"><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>

</body>
</html>
[/HTML]


CSS:

Expand|Select|Wrap|Line Numbers
  1. /* Sets the attribute for TH property. Watch out for the TH here. It is used instead of TD. */
  2. thead.fixedHeader td
  3. {
  4.  
  5.  
  6. }
  7.  
  8.  
  9.  
  10.  /*hover effect */
  11. tr.hovered 
  12.     background: #E8F4FF; 
  13.     cursor: pointer;
  14. }
  15.  
  16.  
  17. /* makes tableDataContainer Class of DIV */
  18. div.tableDataContainer   
  19. {
  20.     clear: both;
  21.     overflow: auto;
  22.  
  23.     /* Sets Width and Height of the container */
  24.     width: 616px;
  25.     height: 300px;
  26. }
  27.  
  28. /* makes tableContainer Class of DIV */
  29. div.tableContainer   
  30. {
  31.     clear: both;
  32.        border: 1px solid #963;
  33.     /* Sets Width and Height of the container */
  34.     width: 616px;
  35.     height: 100%;
  36.     position: absolute;
  37.     background: #E6EDF5;
  38.     left: 100px;
  39.     top: 100px;
  40. }
  41.  
  42.  
  43.  
  44.  
  45. div.tableContainer table
  46. {
  47.     padding: 0px;
  48.     float: left;
  49.     width: 600px;
  50.     height: 100%;
  51. }
  52.  
  53.  
  54.  
  55.  
  56. div.tableContainer td.col1, div.tableContainer th.col1
  57. {
  58.     width: 28%;
  59. }
  60.  
  61. div.tableContainer td.col2, div.tableContainer th.col2
  62. {
  63.     width: 28%;
  64. }
  65.  
  66. div.tableContainer td.col3, div.tableContainer th.col3
  67. {
  68.     width: 28%;
  69. }
  70.  
  71. div.tableContainer td.col4, div.tableContainer th.col4
  72. {
  73.     width: 16%;
  74. }
  75.  
  76.  
  77.  
  78.  
  79.  
  80.  
  81.  
  82.  
  83. table, th, td {
  84.     border: 1px solid #D4E0EE;
  85.     border-collapse: collapse;
  86.     font-family: "Trebuchet MS", Arial, sans-serif;
  87.     color: #555;
  88. }
  89.  
  90.  
  91.  
  92. td, th {
  93.     padding: 4px;
  94. }
  95.  
  96. thead th{
  97.     text-align: center;
  98.     background: #E6EDF5;
  99.     color: #4F76A3;
  100.  
  101. }
  102.  
  103.  
  104.  
  105. tbody tr { background: #FCFDFE; }
  106.  
  107. tbody tr.shaded { background: #F7F9E0; }
  108.  
Dec 6 '07 #16

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Ken Kast | last post: by
3 posts views Thread by moondaddy | last post: by
11 posts views Thread by Grischa Brockhaus | last post: by
2 posts views Thread by dfdavis.mtu | last post: by
1 post views Thread by KoosHopeloos | last post: by
5 posts views Thread by Mel | last post: by
reply views Thread by leo001 | last post: by
reply views Thread by Anwar ali | last post: by

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.