473,396 Members | 2,009 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > html / css > questions > header position on table layout

Join Bytes to post your question to a community of 473,396 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 2383
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. { 
  13.     background: #E8F4FF; 
  14.     cursor: pointer;
  15. }
  16.  
  17.  
  18. /* makes tableDataContainer Class of DIV */
  19. div.tableDataContainer   
  20. {
  21.     clear: both;
  22.     overflow: auto;
  23.  
  24.     /* Sets Width and Height of the container */
  25.     width: 616px;
  26.     height: 300px;
  27. }
  28.  
  29. /* makes tableContainer Class of DIV */
  30. div.tableContainer   
  31. {
  32.     clear: both;
  33.        border: 1px solid #963;
  34.     /* Sets Width and Height of the container */
  35.     width: 616px;
  36.     height: 100%;
  37.     position: absolute;
  38.     background: #E6EDF5;
  39.     left: 100px;
  40.     top: 100px;
  41. }
  42.  
  43.  
  44.  
  45.  
  46. div.tableContainer table
  47. {
  48.     padding: 0px;
  49.     float: left;
  50.     width: 600px;
  51.     height: 100%;
  52. }
  53.  
  54.  
  55.  
  56.  
  57. div.tableContainer td.col1, div.tableContainer th.col1
  58. {
  59.     width: 28%;
  60. }
  61.  
  62. div.tableContainer td.col2, div.tableContainer th.col2
  63. {
  64.     width: 28%;
  65. }
  66.  
  67. div.tableContainer td.col3, div.tableContainer th.col3
  68. {
  69.     width: 28%;
  70. }
  71.  
  72. div.tableContainer td.col4, div.tableContainer th.col4
  73. {
  74.     width: 16%;
  75. }
  76.  
  77.  
  78.  
  79.  
  80.  
  81.  
  82.  
  83.  
  84. table, th, td {
  85.     border: 1px solid #D4E0EE;
  86.     border-collapse: collapse;
  87.     font-family: "Trebuchet MS", Arial, sans-serif;
  88.     color: #555;
  89. }
  90.  
  91.  
  92.  
  93. td, th {
  94.     padding: 4px;
  95. }
  96.  
  97. thead th{
  98.     text-align: center;
  99.     background: #E6EDF5;
  100.     color: #4F76A3;
  101.  
  102. }
  103.  
  104.  
  105.  
  106. tbody tr { background: #FCFDFE; }
  107.  
  108. tbody tr.shaded { background: #F7F9E0; }
  109.  
Dec 6 '07 #16

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

Similar topics

4
Relative Absolute Position
by: Ken Kast | last post by:
Here's my situation. I have a statically positioned table that has an image in a cell. I also have some layers, defined by absolute-positioned DIVs for some animation. Everything works until I...
Javascript
3
How to position a user control on a web form
by: moondaddy | last post by:
I'm trying to create my first user control and its function is to replace the use of a frames page. I want to position it under the pages header menus and to the right of the pages contents menus....
ASP.NET
1
IE6 Bug - absolute positioned header DIV disappears
by: AndrewF | last post by:
Hi all, I am sure something like this has been covered somewhere so I am hoping a quick answer or pointer may suffice, however a couple of days trawling and I can't find anything on it. I'm...
HTML / CSS
11
Header, Footer, Content Layout using DIV and CSS?
by: Grischa Brockhaus | last post by:
Hi, I'm trying to produce a div layout containing a header on the top with fixed height, a footer on the bottom using fixed height and a content layer using what's left of the browsers window. ...
HTML / CSS
2
Fixed Table Header causing slow scrolling
by: dfdavis.mtu | last post by:
I have a table that I dynamically fill with data from a database for medical companies to be able to determine if their patients meet certain criteria. However they want a fixed header for it so...
HTML / CSS
1
<div>: can't get content under header
by: KoosHopeloos | last post by:
L.S., I'm trying to make a layout which is completely fixed in width and height if needed by using three divs rows (header, content, footer) which have each 3 div again to be able to play around...
HTML / CSS
5
Header Labels
by: Mel | last post by:
I created a header that adjusts with the size of the browser windows. How do I place labels in the header section so they also maintain their position when the window is resized? One of the labels...
ASP.NET
2
100% header and 100%footer image
by: darkzone | last post by:
Looked almost ok in my editor but not so good in fire fox. I was going for a layout that was elastic some what. A header with one image repeating 100%, an there image slightly to the left also in...
HTML / CSS
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++
0
tracyyun
Discussion: How does Zigbee compare with other wireless protocols in smart home applications?
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...
General
0
agi2029
AI Job Threat for Devs
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
Career Advice

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.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!