Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

Keep table headers static while rows scroll underneath

Posted on 2007-03-23
6
Medium Priority
?
2,592 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 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
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 

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

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses

578 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