?
Solved

Keep table headers static while rows scroll underneath

Posted on 2007-03-23
6
Medium Priority
?
2,586 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 29

Expert Comment

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

Accepted Solution

by:
Pravin Asar earned 2000 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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

777 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