Sticky Table Headers

Sticky Table Headers is a jQuery plugin that makes large tables more usable by having the table header stick to the top of the screen when scrolling.

Browser Support

The plugin has been verified to work in:

• Chrome 35
• Firefox 29
• Internet Explorer 8-11
• Safari 5

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

Source: github.com

1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" media="all" href="css/custom.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="../js/jquery.stickytableheaders.js"></script>

2. HTML

<table class="tableWithFloatingHeader nasdaq">
	<thead>
		<tr>
			<th colspan="9">
				Companies listed on NASDAQ OMX Copenhagen.
			</th>
		</tr>
		<tr>
			<th style="min-width:200px">
				Full name
			</th>
			<th>
				CCY
			</th>
			<th>
				Last
			</th>
			<th>
				+/-
			</th>
			<th>
				%
			</th>
			<th>
				Bid
			</th>
			<th>
				Ask
			</th>
			<th>
				Volume
			</th>
			<th>
				Turnover
			</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
				A.P. Møller...
			</td>
			<td>
				DKK
			</td>
			<td>
				33,220.00
			</td>
			<td>
				760
			</td>
			<td>
				2.34
			</td>
			<td>
				33,140.00
			</td>
			<td>
				33,220.00
			</td>
			<td>
				594
			</td>
			<td>
				19,791,910
			</td>
		</tr>
		<tr>
			<td>
				A.P. Møller...
			</td>
			<td>
				DKK
			</td>
			<td>
				34,620.00
			</td>
			<td>
				640
			</td>
			<td>
				1.88
			</td>
			<td>
				34,620.00
			</td>
			<td>
				34,700.00
			</td>
			<td>
				9,954
			</td>
			<td>
				346,530,246
			</td>
		</tr>
		...	
	</tbody>
</table>

3. JAVASCRIPT

$("table").stickyTableHeaders();

4. OPTIONS

You can initialize the plugin with an options map to tweak the behavior. The following options are supported:

fixedOffset

A number or jQuery object specifying how much the sticky header should be offset from the top of the page:

$('table').stickyTableHeaders({fixedOffset: $('#header')});

scrollableArea

A DOM element or jQuery object. Allows you to overwrite which surrounding element is scrolling. Defaults to window.

This is can be done by calling the plugin with the new options:

$('table').stickyTableHeaders({fixedOffset: [new-offset]});