Skip to content

Instantly share code, notes, and snippets.

@kas-cor

kas-cor/TableHeadClone.html

Last active August 29, 2015 14:19
Show Gist options
  • Save kas-cor/72a9153081588172b3ea to your computer and use it in GitHub Desktop.
Save kas-cor/72a9153081588172b3ea to your computer and use it in GitHub Desktop.
Download ZIP
TableHeadClone
Raw
script.js
$(function() {
if ($(".headclone").length) {
var pos=$(".headclone").position();
$(window).scroll(function() {
if ($(window).scrollTop()>pos.top) {
if (!$("#shapka").length) {
var h=0;
$(".headclone tr[class^=headclone-]").each(function() {
h+=$(this).height();
});
$("body").after("<div id=\"shapka\"></div>");
$("#shapka").css({
"position": "fixed",
"top": "0px",
"left": (pos.left+1-$(window).scrollLeft())+"px",
"width": $(".headclone").width(),
"height": h+1+"px",
"overflow": "hidden",
"box-shadow": "0 5px 15px 0 #aaa",
"display": "none"
}).html($(".headclone").clone()).fadeIn("fast");
} else {
if ($("#shapka").css("display")!=="none") {
$("#shapka").css({"left": (pos.left+1-$(window).scrollLeft())+"px"});
} else {
$("#shapka").fadeIn("fast");
}
}
} else {
$("#shapka").fadeOut("fast");
}
});
$(window).resize(function() {
if ($("#shapka").length) {
$("#shapka").css({
"left": (pos.left+1-$(window).scrollLeft())+"px",
"width": $(".headclone").width()
});
}
});
}
});
Raw
TableHeadClone.html
<!DOCTYPE html>
<html>
<head>
<title>Sample table head clone</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<table border="1" style="border-collapse: collapse" width="100%" cellspacing="1" class="headclone">
<tr align="center" bgcolor="#CCCCCC" class="headclone-1">
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr align="center" bgcolor="#CCCCCC" class="headclone-2">
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
<tr>
<td>123</td>
<td>244</td>
<td>4563</td>
<td>23</td>
<td>645</td>
</tr>
<tr>
<td>fgfxd</td>
<td>xcv</td>
<td>ng</td>
<td>sdgf</td>
<td>x</td>
</tr>
</table>
</body>
</html>
@kas-cor
Copy link
Author

kas-cor commented Apr 13, 2015

Cloning of the table header

Example:

<table border="1" style="border-collapse: collapse" width="100%" cellspacing="1" class="headclone"> <!-- Class table -->
    <!-- Begin header -->
    <tr align="center" bgcolor="#CCCCCC" class="headclone-1"> <!-- Class for the first line of hats -->
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr align="center" bgcolor="#CCCCCC" class="headclone-2"> <!-- Class for the second line of hats -->
        <td>6</td>
        <td>7</td>
        <td>8</td>
        <td>9</td>
        <td>10</td>
    </tr>
    <!-- End header -->
    <!-- Begin table lines -->
    <tr>
        <td>123</td>
        <td>244</td>
        <td>4563</td>
        <td>23</td>
        <td>645</td>
    </tr>
    <!-- End table lines -->
</table>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment