Solved

Keep table headers static while rows scroll underneath

Posted on 2007-03-23
6
2,583 Views
Last Modified: 2013-11-19
i have a table that i want the headers to stay in the same place as the user scrolls down the page. any code for this? i can use html, css and js in ie6, 7 and ff on pc browsers.
0
Comment
Question by:omicronpersei8
  • 3
  • 2
6 Comments
 
LVL 29

Expert Comment

by:Badotz
ID: 18782129
Should be recent examples here at EE - tried a search?
0
 
LVL 28

Accepted Solution

by:
Pravin Asar earned 500 total points
ID: 18782738
<html>
<head>
<style type="text/css">
td, th { width: 100px; }
</style>
<script language="javascript">
function AlternateColors(tblObj, colorStr) {
      if (!tblObj) { return; }
      var colors=colorStr.split(',');
      var cnt =1;
      for (var trs=0; trs < tblObj.rows.length; trs++) {
            trObj = tblObj.rows[trs];
            trObj.style.backgroundColor = colors[1-parseInt(cnt%2)];
            cnt++;
            if (cnt > 2) { cnt = 1; }
      }
}
</script>
</head>
<body onload="AlternateColors(document.getElementById('datatable'),'#CCCCCC,#00FFFF');">
<div style="width:500;">

<table id="headertable"  border="1">
<tr style="background-color: #4499dd;">
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</table>
</div>
<div style="width: 520; height: 100px; overflow: scroll;">
<table id="datatable" border="1">
<tr>
<td>Value 1 1</td>
<td>Value 1 2</td>
<td>Value 1 3</td>
<td>Value 1 4</tD>
<td>Value 1 5</td>
</tr>
<tr>
<td>Value 2 1</td>
<td>Value 2 2</td>
<td>Value 2 3</td>
<td>Value 2 4</tD>
<td>Value 2 5</td>
</tr>
<tr>
<td>Value 3 1</td>
<td>Value 3 2</td>
<td>Value 3 3</td>
<td>Value 3 4</tD>
<td>Value 3 5</td>
</tr>
<tr>
<td>Value 4 1</td>
<td>Value 4 2</td>
<td>Value 4 3</td>
<td>Value 4 4</tD>
<td>Value 4 5</td>
</tr>
</table>
</div>
</body>
</html>
0
 

Author Comment

by:omicronpersei8
ID: 18783450
@Badotz: my searching abilities are those of a bat in daylight

@pravinasarus: nice. thx.
0
Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

 

Author Comment

by:omicronpersei8
ID: 18783458
i modified one thing (besides the beautiful colors) to hide the scrollbars unless needed.

i changed this line:

<div style="width: 520; height: 100px; overflow: scroll;">

to this:

<div style="width: 520; height: 100px; overflow: auto;">
0
 
LVL 29

Expert Comment

by:Badotz
ID: 18783459
lol - let your bat-fingers do the bat-walking, eh? BAH-ha-ha-ha :->
0
 

Author Comment

by:omicronpersei8
ID: 18783466
haha, nice
0

Featured Post

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.

828 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question