*{margin:0;padding:0;box-sizing: border-box;}
table .header-fixed {
position: fixed;
top: 0px;
/* 10 less than .navbar-fixed to prevent any overlap */
z-index: 1020;
border-bottom: 1px solid #d5d5d5;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 1px 0 #fff, 0 1px 5px rgba(0, 0, 0, 0.1);
/* IE6-9 */
filter: progid: DXImageTransform.Microsoft.gradient(enabled=false);
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../css/bootstrap.min.css">
<link rel="stylesheet" href="../css/style.css">
<script src="../js/jquery-1.11.2.js"></script>
<script src="../js/script.js"></script>
</head>
<body>
<table id="mytable" class="table table-bordered table-striped table-fixed-header">
<thead class="header">
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data Column 1</td>
<td>Data Column 2</td>
<td>Data Column 3</td>
</tr>
</tbody>
</table>
<table id="mytable2" class="table table-bordered table-striped table-fixed-header">
<thead class="header">
<tr>
<th>column 11</th>
<th>column 22</th>
<th>column 33</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data Column 11</td>
<td>Data Column 22</td>
<td>Data Column 33</td>
</tr>
</tbody>
</table>
</body>
</html>
(function() {
(function($) {
return $.fn.fixedHeader = function(options) {
var config;
config = {
topOffset: 40,
bgColor: "#EEEEEE"
};
if (options) {
$.extend(config, options);
}
return this.each(function() {
var $head, $win, headTop, isFixed, o, processScroll, ww;
processScroll = function() {
var headTop, i, isFixed, scrollTop, t;
if (!o.is(":visible")) {
return;
}
i = void 0;
scrollTop = $win.scrollTop();
t = $head.length && $head.offset().top - config.topOffset;
if (!isFixed && headTop !== t) {
headTop = t;
}
if (scrollTop >= headTop && !isFixed) {
isFixed = 1;
} else {
if (scrollTop <= headTop && isFixed) {
isFixed = 0;
}
}
if (isFixed) {
return $("thead.header-copy", o).removeClass("hide");
} else {
return $("thead.header-copy", o).addClass("hide");
}
};
o = $(this);
$win = $(window);
$head = $("thead.header", o);
isFixed = 0;
headTop = $head.length && $head.offset().top - config.topOffset;
$win.on("scroll", processScroll);
$head.on("click", function() {
if (!isFixed) {
return setTimeout((function() {
return $win.scrollTop($win.scrollTop() - 47);
}), 10);
}
});
$head.clone().removeClass("header").addClass("header-copy header-fixed").appendTo(o);
ww = [];
o.find("thead.header > tr:first > th").each(function(i, h) {
return ww.push($(h).width());
});
$.each(ww, function(i, w) {
return o.find("thead.header > tr > th:eq(" + i + "), thead.header-copy > tr > th:eq(" + i + ")").css({
width: w
});
});
o.find("thead.header-copy").css({
margin: "0 auto",
width: o.width(),
"background-color": config.bgColor
});
return processScroll();
});
};
})(jQuery);
}).call(this);
$(document).ready(function() {
// add 30 more rows to the table
var row = $('table#mytable > tbody > tr:first');
var row2 = $('table#mytable2 > tbody > tr:first');
for (i = 0; i < 30; i++) {
$('table#mytable > tbody').append(row.clone());
$('table#mytable2 > tbody').append(row2.clone());
}
// make the header fixed on scroll
$('.table-fixed-header').fixedHeader();
});
