Solved

Keep table headers static while rows scroll underneath

Posted on 2007-03-23
6
2,584 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 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

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

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

730 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