473,785 Members | 2,858 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
15 2411
daniel2335
49 New Member
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 Top Contributor
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 Top Contributor
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
daniel2335
49 New Member
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 Recognized Expert Expert
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
daniel2335
49 New Member
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.c ss" type="text/css">
<title>Clickabl e Rows in Tables</title>









<script type="text/javascript">

function rowHover()
{

rowShader();

var tables=document .getElementsByT agName('table') ;
for (var i=0;i<tables.le ngth;i++)
{
if(tables[i].className.matc h("dataTable" ))
{
var trs=tables[i].getElementsByT agName('tr');
for(var j=0, len=trs.length; j<len; j++)
{

trs[j].onmouseover=fu nction() { this.className= 'hovered'; }
if(trs[j].className=="sh aded")
{
trs[j].onmouseout=fun ction() { this.className= "shaded"; }
}
else
{
trs[j].onmouseout=fun ction() { this.className= "normal"; }
}
}
}
}
}


function rowShader()
{
var tables=document .getElementsByT agName('table') ;
for (var i=0;i<tables.le ngth;i++)
{
if(tables[i].className.matc h("dataTable" ))
{
var trs=tables[i].getElementsByT agName('tr');
for(var j=0, len=trs.length; j<len; j++)
{
if(j%2)
{
trs[j].className="sha ded";
}
else
{
trs[j].className="nor mal";
}
}
}
}
}






window.onload = rowHover;

</script>


</head>

<body>


<div class="tableCon tainer">
<table class="headerTa ble">

<thead class="fixedHea der">
<tr>
<th class="col1">St ation</th>
<th class="col2">Da te</th>
<th class="col3">St atus</th>
<th class="col4">Ch eck</th>

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

<div class="tableDat aContainer">

<table class="dataTabl e">
<tbody>
<tr>
<td class="col1">KA BC</td>
<td class="col2">09/12/2002</td>
<td class="col3">Su bmitted</td>
<td class="col4"><i nput 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
11019
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 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 to have it be that they would stay in the same relative position. I want to keep the image as an...
Javascript
3
6452
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. How can I set the top and left position of this control? -- moondaddy@nospam.com
ASP.NET
1
4808
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 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 content and supplementar content are positioned higher in the document structure then the links go...
HTML / CSS
11
16585
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. 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 top:40px;bottom:40px; This works very well with firefox but doesn't work with IE, as IE ignores the bottom statement...
HTML / CSS
2
12946
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 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 to enter the information in a table via C# by storing it in a label. This works fine and scrolls...
HTML / CSS
1
2723
<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 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 header height. The same goes for the footer/content div row.
HTML / CSS
5
2385
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 is constant but the rest will be entered programmatically, for example, the users name, their company, city, state and zip. My example code: <body> <form id="form1" runat="server">
ASP.NET
2
3192
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 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 there for white but the footer image could now be viewed. ?= <!DOCTYPE HTML PUBLIC...
HTML / CSS
0
9645
marktang
What is ONU?
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 usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...
General
0
10324
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, 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. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...
C / C++
0
10147
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
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 captivates audiences and drives business growth. The Art of Business Website Design Your website is...
Online Marketing
1
10090
The easy way to turn off automatic updates for Windows 10/11
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...
Windows Server
0
8971
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, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...
Career Advice
1
7499
isladogs
Access Europe - Using VBA to create a class based on a table - Wed 1 May
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...
Microsoft Access / VBA
0
6739
Couldn’t get equations in html when convert word .docx file to html file in C#.
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 into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...
C# / C Sharp
1
4050
transfer the data from one system to another through ip address
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system
C# / C Sharp
2
3645
muto222
How to add payments to a PHP MySQL app.
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
PHP

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
How to Post and Respond on Bytes
How to Promote and Link on Bytes
How to increase your Ranking on Bytes
Become a Recognized Expert on Bytes
Feedback Welcomed! Contact Us