1 reply [Last post]
tqmd1
tqmd1's picture
Offline
Regular
Pakistan
Last seen: 3 weeks 1 day ago
Pakistan
Timezone: GMT+5
Joined: 2011-10-15
Posts: 17
Points: 35

Sir I have this example

http://brentmuir.com/projects/freezeheader/demo.html

Table header freez when header row touch screen top.

Now I have these code to freez table header

	
	
	
	Untitled Document
	
	
	body{
		padding:30px;
	}
	.box1{
	margin:0 auto;
	width:60%;
	padding:20px;
	border:1px solid blue;
	text-align:center;
}
table
{
	width:50%;
	text-align:center;
	margin:0 auto;
}
th {
	width:50%;
	border:1px solid red;
	background-color:gold;
	color:#4F38C0;
	line-height:25px;
	font-weight:bolder;
	font-size:16px;
}
tr {

	border:1px solid blue;
}
td {
	border:1px solid blue;
}

	
	
	<div class="box1">
	 This is Table header freezing example
	
	
	
	Header 1
	Header 2
	
	
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
	OneTow
		
	</div>      
	
	

How and where to add codes to make my table header freez like shown in the link of this thread.

Please help

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 5 hours 41 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9621
Points: 3689

javascript

This was done with javascript (jQuery, actually). Simply view source to see how it's done. Download the jQuery library and the freezeheader.js script they used.

cheers,

gary

//mod note: You had a typo or syntax error in your link. It caused a 404 error. Fixed. ~g

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.