stickytable v1.1.1
Example usage of stickytable.
HTML
<a href='#' class="btn btn-primary" id="destroyBtn">Destroy StickyTable</a>
<a href='#' class="btn btn-primary" id="initBtn">Init StickyTable</a>
<div style="height:200px;">
<table id="myTable" class="table">
<thead>
<tr>
<th>Population</th>
<th>Alpha</th>
<th>Beta</th>
<th>Gamma</th>
<th>Delta</th>
<th>Epsilon</th>
<th>Zeta</th>
<th>Eta</th>
<th>Theta</th>
<th>Iota</th>
<th>Kappa</th>
<th>Lambda</th>
<th>Mu</th>
<th>Nu</th>
<th>Xi</th>
<th>Omicron</th>
<th>Pi</th>
<th>Rho</th>
<th>Sigma</th>
<th>Tau</th>
<th>Upsilon</th>
</tr>
</thead>
<tbody>
<tr>
<th><input type="checkbox" /></th>
<td>23</td>
<td>88</td>
<td>8</td>
<td>2</td>
<td>67</td>
<td>83</td>
<td>81</td>
<td>37</td>
<td>91</td>
<td>96</td>
<td>13</td>
<td>3</td>
<td>95</td>
<td>98</td>
<td>10</td>
<td>87</td>
<td>70</td>
<td>54</td>
<td>72</td>
<td>75</td>
</tr>
<tr>
<th>Sample #2</th>
<td>14</td>
<td>21</td>
<td>20</td>
<td>21</td>
<td>9</td>
<td>68</td>
<td>60</td>
<td>73</td>
<td>22</td>
<td>29</td>
<td>9</td>
<td>49</td>
<td>49</td>
...
CSS
/*
* jQuery Stick Table Headers - v1.1.1
* https://github.com/jpchip/stickytable
*/
.sticky-wrap {
overflow-x: auto;
overflow-y: hidden;
position: relative;
width: 100%;
}
.sticky-wrap .sticky-thead, .sticky-wrap .sticky-col, .sticky-wrap .sticky-intersect {
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: 50;
width: auto;
/* Prevent table from stretching to full size */
}
.sticky-wrap .sticky-thead {
box-shadow: 0 0.25em 0.1em -0.1em rgba(0, 0, 0, .125);
z-index: 100;
width: 100%;
/* Force stretch */
}
.sticky-wrap .sticky-intersect {
opacity: 1;
z-index: 150;
}
.sticky-wrap .sticky-intersect th {
background-color: #666;
color: #eee;
}
.sticky-wrap td, .sticky-wrap th {
box-sizing: border-box;
}
.sticky-wrap th {
background-color: #666;
color: #eee;
}
/* assumes container element has set height... */
.sticky-wrap.overflow-y {
overflow-y: auto;
max-height:100%;
}
JavaScript
/*
* jQuery throttle / debounce - v1.1 - 3/7/2010
* http://benalman.com/projects/jquery-throttle-debounce-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/ (function (b, c) {
var $ = b.jQuery || b.Cowboy || (b.Cowboy = {}),
a;
$.throttle = a = function (e, f, j, i) {
var h, d = 0;
if (typeof f !== "boolean") {
i = j;
j = f;
f = c
}
function g() {
var o = this,
m = +new Date() - d,
n = arguments;
function l() {
d = +new Date();
j.apply(o, n)
}
function k() {
h = c
}
if (i && !h) {
l()
}
h && clearTimeout(h);
if (i === c && m > e) {
l()
} else {
if (f !== true) {
h = setTimeout(i ? k : l, i === c ? e - m : e)
}
}
}
if ($.guid) {
g.guid = j.guid = j.guid || $.guid++
}
return g
};
$.debounce = function (d, e, f) {
return f === c ? a(d, e, false) : a(d, f, e !== false)
}
})(this);
/*
* jQuery Stick Table Headers - v1.1.1
* https://github.com/jpchip/stickytable
*
* Wrapped version of sticky table headers code here:
* http://tympanus.net/codrops/2014/01/09/sticky-table-headers-columns/
* http://tympanus.net/Tutorials/StickyTableHeaders/
*
* CSS located in jquery-stickytable.css
*
* Depends:
* jQuery
* jQuery throttle / debounce - v1.1 - 3/7/2010
* http://benalman.com/projects/jquery-throttle-debounce-plugin/
*
*/
(function ($, window, document, undefined) {
'use strict';
var pluginName = 'stickyTable',
defaults = {
copyTableClass: true, //copies table classes to sticky tables
copyEvents: false, //copy events on...