Skip to content

Instantly share code, notes, and snippets.

@jedy

jedy/float_head_table.html

Created June 4, 2012 10:59
Show Gist options
  • Save jedy/2867745 to your computer and use it in GitHub Desktop.
Save jedy/2867745 to your computer and use it in GitHub Desktop.
Download ZIP
固定表头
Raw
float_head_table.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<style>
table {
border-collapse: collapse
}
</style>
<script src="jquery.min.js"></script>
<script>
function add_float_head(tid){
var anchor_size = 20;
var $t = $("#" + tid);
var $h = $("#" + tid + " thead");
var $float_head = $h.clone();
$float_head = $float_head.wrap("<table></table>").parent();
$float_head.css({"width": $h.width(), "float": "right"});
$anchor = $('<span>↑</span>');
$anchor.css({"width": anchor_size, "cursor": 'pointer'});
$anchor.click(function(){
$(document).scrollTop($t.offset().top - 1);
});
$float_head = $float_head.before($anchor);
delete $anchor;
$float_head = $float_head.wrapAll("<div></div>").parent();
$float_head.insertBefore($t);
$float_head.css({"visibility": "hidden","position": "fixed", "top": 0, "width": $h.width() + anchor_size});
var $tds = $h.find("th");
var $float_tds = $float_head.find("th");
$tds.each(function(idx){
$float_tds.eq(idx).width($(this).width());
});
delete $float_tds;
delete $tds;
var head_top = $h.offset().top + $h.height() - $float_head.height();
var head_left = $h.offset().left;
$float_head.css("left", head_left - $(document).scrollLeft() - anchor_size);
$(window).scroll(function(e) {
if($(document).scrollTop() >= head_top){
$float_head.css("visibility", "visible");
$float_head.css("left", head_left - $(document).scrollLeft() - anchor_size);
} else {
$float_head.css("visibility", "hidden");
}
});
}
$(function(){
add_float_head("t");
});
</script>
<body>
<table id="t" style="margin-left: 30px">
<thead style="background-color:blue">
<tr>
<th>a</th>
<th>b</th>
<th>a</th>
<th>b</th>
<th>a</th>
<th>b</th>
<th>a</th>
<th>b</th>
<th>a</th>
<th>b</th>
<th>a</th>
<th>b</th>
<th>a</th>
<th>b</th>
<th>a</th>
<th>b</th>
<th>a</th>
<th>b</th>
<th>a</th>
<th>b</th>
<th>a</th>
<th>b</th>
<th>a</th>
<th>b</th>
</tr>
</thead>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123aaaaaaaaaaaaaaaa</td>
<td>b123</td>
<td>a123</td>
<td>b123fffffffffffffffff</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123aaaaaaaaaaaaaaaaaaaaaaaa</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a12ffffffffffffffffffffffffffffffff3</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
<tr>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
<td>a123</td>
<td>b123</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment