Hi, I have a page with data like this.
----------------------------------------------------1st paragraph
---------table
------2nd paragraph
I want on page scroll, the table headers to remain fixed until table data is over and it reached second paragraph.
Any way to do this? I dont want to do another scroll in table body. One scroll for whole page
Jump to PostThere's an example here.
Jump to PostBetter post in HTML,CSS forum. Remove there.
Jump to PostDisagree, how would you do this with only CSS?
Jump to PostHave it live somewhere?
Better post in HTML,CSS forum. Remove there.
Disagree, how would you do this with only CSS?
Thanks for the link, altho am using jsp and not php.
I will try to work it out on jsp, read that and learn.
Ok, I have done html.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");
</script type="text/javascript">
<script>
// when the dom is ready...
$(function() {
var i = 0;
$("colgroup").each(function() {
i++;
$(this).attr("id", "col"+i);
});
var totalCols = i;
i = 1;
$("td").each(function() {
$(this).attr("rel", "col"+i);
i++;
if (i > totalCols) { i = 1; }
});
$("td").hover(function() {
$(this).parent().addClass("hover");
var curCol = $(this).attr("rel");
$("#"+curCol).addClass("hover");
}, function() {
$(this).parent().removeClass("hover");
var curCol = $(this).attr("rel");
$("#"+curCol).removeClass("hover");
});
});
</script>
<title>Fixed Table Header</title>
</head>
<body>
<img src="angry.gif" alt="Angry face" />
<div id="page-wrap">
<table>
<thead>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
</thead>
<tbody>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
<tr>
<td>23</td>
<td>34</td>
<td>45</td>
<td>56</td>
<td>67</td>
</tr>
</tbody>
</table>
</div>
<img src="angry.gif" alt="Angry face" />
</body>
</html>style.css
/*
CSS-Tricks Example
by Chris Coyier
[url]http://css-tricks.com[/url]
*/
* { margin: 0; padding: 0; }
body { font: 14px Georgia, serif; }
#hook-just-in-case[style] { position: fixed !important; top: 0; }
#page-wrap { width: 600px; margin: 0 auto; }
table { border-collapse: collapse; width: 100%; margin-top: 109px; }
td { border: 1px solid #ccc; padding: 10px; }
thead { width: 100%; position: fixed; height: 109px; top: 90px;
background: url(../images/header.png) no-repeat; }
.slim { width: 88px; }
.hover { background-color: #eee; }whats so different am doing from that page? its not working.i scroll down the header goes down, and messed up. Any help/
angry.gif is this http://graphics.hi5comments.net/graphics/brazil/05.gif
I even tried this two things, and it didnt work.
<html>
<head>
<script type="text/javascript">
function moveScroll(){
var scroll = $(window).scrollTop();
var anchor_top = $("#maintable").offset().top;
var anchor_bottom = $("#bottom_anchor").offset().top;
if (scroll>anchor_top && scroll<anchor_bottom) {
clone_table = $("#clone");
if(clone_table.length == 0){
clone_table = $("#maintable").clone();
clone_table.attr('id', 'clone');
clone_table.css({position:'fixed',
'pointer-events': 'none',
top:0});
clone_table.width($("#maintable").width());
$("#table-container").append(clone_table);
$("#clone").css({visibility:'hidden'});
$("#clone thead").css({visibility:'visible'});
}
} else {
$("#clone").remove();
}
}
$(window).scroll(moveScroll);
</script>
<style>
body { height: 1000px; }
thead{
background-color:white;
}
</style>
</head>
<div id="table-container">
<table id="maintable">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>some really long line here instead</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
<div id="bottom_anchor"></div>
</div>
</html>same code as explained above and its not working.
Have it live somewhere?
dont have it live anywhere.however i want to ask u sthg.
what does $("#maintable") stand for? what is it different then $("maintable")??
what is it different then document.getelementbyid("maintable")
my main problem is $("#maintable") is being null.but $("maintable") exists..
$("#maintable") gives you a jQuery wrapper of the element that has that id. document.getElementById("maintable") is that element. You can also get it with $("#maintable")[0] . $("maintable") is something different, it gives you a wrapper of the elements that have the tag name maintable ( <maintable /> ), that should be 0 elements.
The main problem is line 25. The window isn't loaded yet, so that fails. It should be:
$(function() { $(window).scroll(moveScroll); });This makes it wait until the document has been fully loaded.
Thansk for all help, I got things working .
<html>
<head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function moveScroll(){
var scroll = $(window).scrollTop();
var anchor_top = $("#maintable").offset().top;
//alert($(window).scrollTop());
//alert($("#maintable").offset().top);
var anchor_bottom = $("#bottom_anchor").offset().top;
//alert($(window).scrollTop());
//alert($("#maintable").offset().top);
//alert(anchor_bottom);
if (scroll>anchor_top && scroll<anchor_bottom) {
clone_table = $("#clone");
if(clone_table.length == 0){
clone_table = $("#maintable").clone();
clone_table.attr('id', 'clone');
clone_table.css({position:'fixed',
'pointer-events': 'none',
top:0});
clone_table.width($("#maintable").width());
$("#table-container").append(clone_table);
$("#clone").css({visibility:'hidden'});
$("#clone thead").css({visibility:'visible'});
}
} else {
$("#clone").remove();
}
}
$(window).scroll(moveScroll);
</script>
<style>
body { height: 1000px; }
thead{
background-color:white;
}
</style>
</head>
<body>
<img src="angry.gif" alt="Angry face" />
<table>
<tr>
<td>
<div id="table-container">
<table id="maintable">
<thead>
<tr>
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>some really long line here instead</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
<div id="bottom_anchor"></div>
</div>
</td>
</tr>
</table>
</body>
</html>This is a working code. Now my challenge is, the scroll is in div not window.
So am using $("#divId").scroll(moveScroll);
var scroll = $("#divId").scrollTop();
var anchor_top = $("#maintable").offset().top;
here the problem lies, on scroll $("#maintable").offset().top keeps changing.While in my working example above ( when scroll is in window) $("#maintable").offset().top is same everytime I alert it.
I think thats why in a div scroll code aint working, while in a window it is.
Btw, its working in firefox but not ie
<html>
<head>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function moveScroll(){
var scroll = $j(window).scrollTop();
var anchor_top = $j("#maintable").offset().top;
//alert($(window).scrollTop());
//alert($("#maintable").offset().top);
var anchor_bottom = $j("#bottom_anchor").offset().top;
//alert($(window).scrollTop());
//alert($("#maintable").offset().top);
//alert(anchor_bottom);
if (scroll>anchor_top && scroll<anchor_bottom) {
clone_table = $j("#clone");
if(clone_table.length == 0){
clone_table = $j("#maintable").clone();
clone_table.attr('id', 'clone');
clone_table.css({position:'fixed',
'pointer-events': 'none',
top:0});
clone_table.width($j("#maintable").width());
$j("#table-container").append(clone_table);
$j("#clone").css({visibility:'hidden'});
$j("#clone thead").css({visibility:'visible'});
}
} else {
$j("#clone").remove();
}
}
var $j = jQuery.noConflict();
//$j(window).scroll(moveScroll);
</script>
<style>
body { height: 1000px; }
thead{
background-color:white;
}
.kahkiBG {background-color:#CBD1D4}
.tableHeader, tableHeader td, tableHeader th { background-color: #CBD1D4; font-family: tahoma; font-size: 8pt; font-weight: bold; color:#523039; text-align:center }
.tableDataCell { background-color: #f7f7e7; font-family: tahoma; font-size: 8pt }
.tableDataCell_2 { background-color: #E9E8E8; font-family: tahoma; font-size: 8pt;}
.tableDataCell_1 {background-color: #f7f7e7; color: #000000}
.tableDataCell_0 {background-color: #f7f7e7; color: silver}
.tableDataCellWhite { font-family: tahoma; font-size: 8pt }
.tableDataCellGls { background-color:#ADD8E6; font-family: tahoma; font-size: 8pt }
</style>
</head>
<body onscroll="moveScroll()" >
<div id="table-container">
<img src="angry.gif" alt="Angry face" />
<table class="kahkiBG" id="maintable">
<thead>
<tr class="tableHeader" >
<th>Col1</th>
<th>Col2</th>
<th>Col3</th>
</tr>
</thead>
<tbody>
<tr class="tableDataCell">
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr class="tableDataCell">
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>some really long line here instead</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
<tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr> <tr>
<td>info</td>
<td>info</td>
<td>info</td>
</tr>
</tbody>
</table>
</div>
<img src="angry.gif" alt="Angry face" />
<div id="bottom_anchor"></div>
</body>
</html>I have attached to you a picture of how its looking in ie.
the table is being duplicated, you have first table and cloned table below it.
whereas in firefox you have first table and clone table on top of it and freezing header is working
http://www.webdeveloper.com/forum/attachment.php?attachmentid=14277&d=1309355899
do note col1 col2 col3 are the headers in that screen.there is two of them , one in first table and two in cloned table.
here is pic of first table
I am using firefox 4 , and ie 7
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.
