fix-table-header
Version:
A jQuery plugin to fix header or footer row in a table on scroll
662 lines (559 loc) • 162 kB
HTML
<html>
<head>
<!-- HTML for code syntax highliting generated using hilite.me - http://hilite.me/ -->
<title>fixTableHeader Plugin</title>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
<!-- The demo plugin jQuery.fixTableHeader -->
<script src="jQuery.fixTableHeader.min.js"></script>
<!-- simple-grid CSS from http://www.simplegrid.io/ -->
<link rel="stylesheet" href="simple-grid.css" />
<!-- Bootstrap 3 tooltip files -->
<script src="tooltip.js"></script>
<link rel="stylesheet" href="tooltip.css" />
<!-- Some custom styles I wrote :p -->
<link rel="stylesheet" href="style.css" />
<!-- Responsive viewport meta -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
$(document).ready(function() {
$('[data-toggle="tooltip"]').tooltip();
$('#tableContainer').fixTableHeader();
$('.tab-toggle').click(function() {
$('.section').each(function() {
$(this).addClass(" hidden");
})
$('#left-' + $(this).attr('data-target') + '').removeClass("hidden");
$('#right-' + $(this).attr('data-target') + '').removeClass("hidden");
$('#tableContainer1').fixTableHeader({
fixHeader: false,
fixFooter: true
});
$('#tableContainer4').fixTableHeader({
fixHeader: true,
fixFooter: true
});
$('#tableContainer2').fixTableHeader({
fixHeader: true,
fixFooter: true
});
$('#tableContainer5').fixTableHeader({
fixHeader: true,
fixFooter: true
});
$('#tableContainer3').fixTableHeader();
$('#tableContainer6').fixTableHeader({
fixHeader: true,
fixFooter: true
});
})
})
function toggleProfile() {
if ($('#profile').height() == 0) {
$('#profile').height(285);
} else {
$('#profile').height(0);
}
}
</script>
</head>
<body>
<div class="banner">
<a href="https://github.com/Jo-Geek/jQuery-FixTableHeader" target="_blank" class="github" data-toggle="tooltip" data-placement="left" title="Project on Github"><img src="res/github.png" /></a>
<h1>jQuery-fixTableHeader</h1>
<p><em>A jQuery plugin to fix header or footer in a table</em></p>
<div class="bottom">Start scrolling for effect..!<a href="javascript:void(0);" onclick="toggleProfile();">@Jo-Geek</a></div>
</div>
<div class="profile center" id="profile">
<img src="res/me.jpg" />
<h3>Jones Vinoth Joseph</h3>
<div class="small">Developer - .Net(C#|VB), HTML, CSS, jQuery</div>
<div class="clear-10"></div>
<div class="clear-10"></div>
<a target="_blank" data-toggle="tooltip" data-placement="bottom" href="https:jvjoseph.blogspot.com/" title="My Blog">
<img src="res/blogger.png" />
</a>
<a target="_blank" data-toggle="tooltip" data-placement="bottom" href="http://stackoverflow.com/users/4084003/" title="Stack Overflow">
<img src="res/stackoverflow.png" />
</a>
<a target="_blank" data-toggle="tooltip" data-placement="bottom" href="https://in.linkedin.com/in/jonesvinothjoseph" title="Linkedin">
<img src="res/linkedin.ico" />
</a>
<a target="_blank" data-toggle="tooltip" data-placement="bottom" href="http://codepen.io/jo_Geek/" title="CodePen">
<img src="res/codepen.png" />
</a>
<a target="_blank" data-toggle="tooltip" data-placement="bottom" href="https://github.com/Jo-Geek/" title="Github">
<img src="res/github.png" />
</a>
<a target="_blank" data-toggle="tooltip" data-placement="bottom" href="mailto:jonesvinothjoseph@hotmail.com" title="Email">
<img src="res/mail.png" />
</a>
<a target="_blank" data-toggle="tooltip" data-placement="bottom" href="tel:+917045477607" title="Phone">
<img src="res/tel.png" />
</a>
<a target="_blank" data-toggle="tooltip" data-placement="bottom" href="https://facebook.com/jones.j.joe/" title="Facebook">
<img src="res/fb.png" />
</a>
<a target="_blank" data-toggle="tooltip" data-placement="bottom" href="https://twitter.com/jodegeek" title="Twitter">
<img src="res/twitter.png" />
</a>
<a target="_blank" data-toggle="tooltip" data-placement="bottom" href="https://plus.google.com/+JonesJosephjvj" title="Google plus">
<img src="res/gplus.png" />
</a>
</div>
<div class="container">
<div class="row">
<div class="col-2 side">
<a class="tab-toggle" data-target="fixedHeader" href="javascript:void(0)">Fixed header</a>
<a class="tab-toggle" data-target="fixedFooter" href="javascript:void(0)">Fixed footer</a>
<a class="tab-toggle" data-target="headerFooter" href="javascript:void(0)">Header and footer</a>
<a class="tab-toggle" data-target="multipleHeader" href="javascript:void(0)">Multiple Header</a>
<a class="tab-toggle" data-target="multipleFooter" href="javascript:void(0)">Multiple Footer</a>
<a class="tab-toggle" data-target="withoutGroup" href="javascript:void(0)">Without <em>grouping</em></a>
<a class="tab-toggle" data-target="responsive" href="javascript:void(0)">Responsive tables</a>
<a href="https://github.com/Jo-Geek/jQuery-FixTableHeader" target="_blank">Github</a>
</div>
<div class="col-10 side-right">
<div class="row">
<div class="col-6">
<div id="left-fixedHeader" class="section">
<h3>Fixed header<small> (This is the default mode, keeps header row fixed)</small></h3>
<div class="clear-10"></div>
Example on the right shows a demo of a single row fixed as header.
<div class="clear-10"></div>
<div class="code">
<div class="header">
HTML
</div>
<div><span style="color: #000080; font-weight: bold"><table></span> </div>
<div> <span style="color: #000080; font-weight: bold"><thead></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><th></span>...<span style="color: #000080; font-weight: bold"></th></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></thead></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tbody></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tbody></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tfoot></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tfoot></span> </div>
<div><span style="color: #000080; font-weight: bold"></table></span> </div>
</div>
<div class="clear-5"></div>
<div class="code">
<div class="header">CSS</div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header, </div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer {</div>
<div><span style="color: #000080; font-weight: bold">border-top</span>: <span style="color: #000080; font-weight: bold">none</span> <span style="color: #008080">!important</span>; </div>
<div><span style="color: #000080; font-weight: bold">border-bottom</span>: 1px solid #ddd; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#3D7083</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span>: white; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#4F90A8</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span> </div>
<div>: white; </div>
<div>
}
</div>
</div>
<div class="clear-5"></div>
<div class="code">
<div class="header">jQuery</div>
<div>$(<span style="color: #0000FF">'#tableContainer'</span>).fixTableHeader();</div>
</div>
</div>
<div id="left-fixedFooter" class="hidden section ">
<h3>Fixed footer<small> (Optional, keeps the footer row fixed)</small></h3>
<div class="clear-10"></div>
Example on the right shows a demo of a single row fixed as footer.
<div class="clear-10"></div>
<div class="code min">
<div class="header">
HTML
</div>
<div><span style="color: #000080; font-weight: bold"><table></span> </div>
<div> <span style="color: #000080; font-weight: bold"><thead></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><th></span>...<span style="color: #000080; font-weight: bold"></th></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></thead></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tbody></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tbody></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tfoot></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tfoot></span> </div>
<div><span style="color: #000080; font-weight: bold"></table></span> </div>
</div>
<div class="clear-5"></div>
<div class="code min">
<div class="header">CSS</div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header,</div>
<div> <span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer {</div>
<div><span style="color: #000080; font-weight: bold">border-top</span>: <span style="color: #000080; font-weight: bold">none</span> <span style="color: #008080">!important</span>; </div>
<div><span style="color: #000080; font-weight: bold">border-bottom</span>: 1px solid #ddd; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#3D7083</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span>: white; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#4F90A8</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span> </div>
<div>: white; </div>
<div>
}
</div>
</div>
<div class="clear-5"></div>
<div class="code">
<div class="header">jQuery</div>
<div>$(<span style="color: #0000FF">'#tableContainer'</span>).fixTableHeader({ fixHeader:<span style="color: #0000FF">false</span>,fixFooter:<span style="color: #0000FF">true</span> });</div>
</div>
</div>
<div id="left-headerFooter" class="hidden section ">
<h3>Fixed header and footer<small> (Optional, keeps both the header and footer row fixed)</small></h3>
<div class="clear-10"></div>
Example on the right shows a demo of bpth header and footer fixed.
<div class="clear-10"></div>
<div class="code min">
<div class="header">
HTML
</div>
<div><span style="color: #000080; font-weight: bold"><table></span> </div>
<div> <span style="color: #000080; font-weight: bold"><thead></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><th></span>...<span style="color: #000080; font-weight: bold"></th></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></thead></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tbody></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tbody></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tfoot></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tfoot></span> </div>
<div><span style="color: #000080; font-weight: bold"></table></span> </div>
</div>
<div class="clear-5"></div>
<div class="code min">
<div class="header">CSS</div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header,</div>
<div> <span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer {</div>
<div><span style="color: #000080; font-weight: bold">border-top</span>: <span style="color: #000080; font-weight: bold">none</span> <span style="color: #008080">!important</span>; </div>
<div><span style="color: #000080; font-weight: bold">border-bottom</span>: 1px solid #ddd; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#3D7083</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span>: white; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#4F90A8</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span> </div>
<div>: white; </div>
<div>
}
</div>
</div>
<div class="clear-5"></div>
<div class="code">
<div class="header">jQuery</div>
<div>$(<span style="color: #0000FF">'#tableContainer'</span>).fixTableHeader({ fixHeader:<span style="color: #0000FF">true</span>,fixFooter:<span style="color: #0000FF">true</span> });</div>
</div>
</div>
<div id="left-multipleHeader" class="hidden section ">
<h3>Multiple headers<small> (Define more than a row as fixed headers)</small></h3>
<div class="clear-10"></div>
Example on the right shows a demo of multiple headers fixed.<br /> Note: <b>All the rows as header should be inside <em><code>thead</code></em> tag</b>
<div class="clear-10"></div>
<div class="code min">
<div class="header">
HTML
</div>
<div><span style="color: #000080; font-weight: bold"><table></span> </div>
<div> <span style="color: #000080; font-weight: bold"><thead></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><th></span>...<span style="color: #000080; font-weight: bold"></th></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><th></span>...<span style="color: #000080; font-weight: bold"></th></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></thead></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tbody></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tbody></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tfoot></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tfoot></span> </div>
<div><span style="color: #000080; font-weight: bold"></table></span> </div>
</div>
<div class="clear-5"></div>
<div class="code min">
<div class="header">CSS</div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header,</div>
<div> <span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer {</div>
<div><span style="color: #000080; font-weight: bold">border-top</span>: <span style="color: #000080; font-weight: bold">none</span> <span style="color: #008080">!important</span>; </div>
<div><span style="color: #000080; font-weight: bold">border-bottom</span>: 1px solid #ddd; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#3D7083</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span>: white; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#4F90A8</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span> </div>
<div>: white; </div>
<div>
}
</div>
</div>
<div class="clear-5"></div>
<div class="code">
<div class="header">jQuery</div>
<div>$(<span style="color: #0000FF">'#tableContainer'</span>).fixTableHeader();</div>
</div>
</div>
<div id="left-multipleFooter" class="hidden section ">
<h3>Multiple footers<small> (Define more than a row as fixed footers)</small></h3>
<div class="clear-10"></div>
Example on the right shows a demo of multiple footers fixed.<br /> Note: <b>All rows as footer should be inside <em><code>tfoot</code></em> tag</b>
<div class="clear-10"></div>
<div class="code min">
<div class="header">
HTML
</div>
<div><span style="color: #000080; font-weight: bold"><table></span> </div>
<div> <span style="color: #000080; font-weight: bold"><thead></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><th></span>...<span style="color: #000080; font-weight: bold"></th></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></thead></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tbody></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tbody></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tfoot></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>   <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>  <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tfoot></span> </div>
<div><span style="color: #000080; font-weight: bold"></table></span> </div>
</div>
<div class="clear-5"></div>
<div class="code min">
<div class="header">CSS</div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header,</div>
<div> <span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer {</div>
<div><span style="color: #000080; font-weight: bold">border-top</span>: <span style="color: #000080; font-weight: bold">none</span> <span style="color: #008080">!important</span>; </div>
<div><span style="color: #000080; font-weight: bold">border-bottom</span>: 1px solid #ddd; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#3D7083</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span>: white; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#4F90A8</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span> </div>
<div>: white; </div>
<div>
}
</div>
</div>
<div class="clear-5"></div>
<div class="code">
<div class="header">jQuery</div>
<div>$(<span style="color: #0000FF">'#tableContainer'</span>).fixTableHeader({ fixHeader:<span style="color: #0000FF">false</span>,fixFooter:<span style="color: #0000FF">true</span> });</div>
</div>
</div>
<div id="left-withoutGroup" class="hidden section ">
<h3>Without grouing <small>(Without the <code>thead</code>, <code>tbody</code>, and <code>tfoot</code> tags.)</small></h3>
<div class="clear-10"></div>
Example on the right shows a demo of headers and footers fixed.<br />
<div class="clear-10"></div>
<div class="code min">
<div class="header">
HTML
</div>
<div><span style="color: #000080; font-weight: bold"><table></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><th></span>...<span style="color: #000080; font-weight: bold"></th></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div><span style="color: #000080; font-weight: bold"></table></span> </div>
</div>
<div class="clear-5"></div>
<div class="code min">
<div class="header">CSS</div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header,</div>
<div> <span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer {</div>
<div><span style="color: #000080; font-weight: bold">border-top</span>: <span style="color: #000080; font-weight: bold">none</span> <span style="color: #008080">!important</span>; </div>
<div><span style="color: #000080; font-weight: bold">border-bottom</span>: 1px solid #ddd; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#3D7083</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span>: white; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#4F90A8</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span> </div>
<div>: white; </div>
<div>
}
</div>
</div>
<div class="clear-5"></div>
<div class="code">
<div class="header">jQuery</div>
<div>$(<span style="color: #0000FF">'#tableContainer'</span>).fixTableHeader({ fixHeader:<span style="color: #0000FF">true</span>,fixFooter:<span style="color: #0000FF">true</span> });</div>
</div>
</div>
<div id="left-responsive" class="hidden section ">
<h3>Responive tables <small>(Supports responsive tables with horizontal scroll)</small></h3>
<div class="clear-10"></div>
Example on the right shows a demo of headers and footers fixed on responsive table.<br />
<div class="clear-10"></div>
<div class="code min">
<div class="header">
HTML
</div>
<div><span style="color: #000080; font-weight: bold"><table></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><th></span>...<span style="color: #000080; font-weight: bold"></th></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div> <span style="color: #000080; font-weight: bold"><tr></span> </div>
<div>  <span style="color: #000080; font-weight: bold"><td></span>...<span style="color: #000080; font-weight: bold"></td></span> </div>
<div> <span style="color: #000080; font-weight: bold"></tr></span> </div>
<div><span style="color: #000080; font-weight: bold"></table></span> </div>
</div>
<div class="clear-5"></div>
<div class="code min">
<div class="header">CSS</div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header,</div>
<div> <span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer {</div>
<div><span style="color: #000080; font-weight: bold">border-top</span>: <span style="color: #000080; font-weight: bold">none</span> <span style="color: #008080">!important</span>; </div>
<div><span style="color: #000080; font-weight: bold">border-bottom</span>: 1px solid #ddd; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-header, <span style="color: #000080; font-weight: bold">th</span>.fth-header { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#3D7083</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span>: white; </div>
<div>} </div>
<div></div>
<div><span style="color: #000080; font-weight: bold">td</span>.fth-footer, <span style="color: #000080; font-weight: bold">th</span>.fth-footer { </div>
<div><span style="color: #000080; font-weight: bold">background-color</span>: <span style="color: #0000FF">#4F90A8</span>; </div>
<div><span style="color: #000080; font-weight: bold">color</span> </div>
<div>: white; </div>
<div>
}
</div>
</div>
<div class="clear-5"></div>
<div class="code">
<div class="header">jQuery</div>
<div>$(<span style="color: #0000FF">'#tableContainer'</span>).fixTableHeader();</div>
</div>
</div>
</div>
<div class="col-6">
<div id="right-fixedHeader" class="section">
<div id="tableContainer" class="container-tb">
<table>
<thead>
<tr>
<th style="height: 15.0pt; width: 96pt">Subject</th>
<th style="width: 95pt">Sem1</th>
<th style="width: 96pt">Sem2</th>
<th style="width: 67pt">Total</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Total</td>
<td class="right">1243</td>
<td class="right">1143</td>
<td class="right">2386</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Physics-1</td>
<td class="right">67</td>
<td class="right">78</td>
<td class="right">145</td>
</tr>
<tr>
<td>Physics-2</td>
<td class="right">76</td>
<td class="right">56</td>
<td class="right">132</td>
</tr>
<tr>
<td>Physics-3</td>
<td class="right">56</td>
<td class="right">67</td>
<td class="right">123</td>
</tr>
<tr>
<td>Physics-4</td>
<td class="right">92</td>
<td class="right">34</td>
<td class="right">126</td>
</tr>
<tr>
<td>Physics-5</td>
<td class="right">76</td>