Solved

Keep table headers static while rows scroll underneath

Posted on 2007-03-23
6
2,582 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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 

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

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

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

Suggested Solutions

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.
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
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…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

773 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