473,549 Members | 3,099 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Header position on Table layout

49 New Member
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]
Dec 4 '07 #1
15 2395
drhowarddrfine
7,435 Recognized Expert Expert
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
daniel2335
49 New Member
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.r r.com/bmerkey/examples/clickable-table-rows.html but the CSS isn't given.
Dec 4 '07 #3
daniel2335
49 New Member
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 Recognized Expert Expert
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 Recognized Expert Expert
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 Recognized Expert Expert
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 Recognized Expert Expert
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 Top Contributor
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 Recognized Expert Expert
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

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

Similar topics

4
10990
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 scroll/resize. Then the image "moves" on the screen but the animation doesn't. The net effect is that their relative positioning changes. I'd like...
3
6430
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. How can I set the top and left position of this control? -- moondaddy@nospam.com
1
4798
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 building a layout and for reasons of PDA and text based browsers I want to have my primary navigation at the bottom of the HTML layout. Thus the main...
11
16546
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. So my header div is defined at top:0; height:40px , my footer is defined as bottom:0; height:40px and the content is defined as...
2
12916
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 they can keep track of the criteria as they scroll since there can be upwards of 1000 or more patients in the table. The way I got this to work was...
1
2708
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 better with the webdesign. The problem is that I need the content div row to nudge up automatically to the header div row, independantly of the...
5
2377
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 is constant but the rest will be entered programmatically, for example, the users name, their company, city, state and zip. My example code:...
2
3186
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 the header, a container a 20% wide box for a list, two 80% wide boxes for content, a footer with the same image set up to end it. It was looking almost...
0
7518
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7446
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7715
Oralloy
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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
7956
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
7808
tracyyun
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 protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
5087
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3498
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
1
1057
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
757
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

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.