jquery固定表头不滚动让内容滚动的代码实现

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery固定表头表格滚动数据效果</title>
<style>
@charset "UTF-8";body{font-family: '微软雅黑',Arial,sans-serif;font-size: 13px;font-style: normal;font-weight: normal;line-height: 21px;}
table{border: solid 1px #D5D5D5;border-collapse: collapse;width: 100%;}
table td{border: 1px solid #D5D5D5;font-size: 12px;padding: 7px 5px;}
table th{background-color: #EEE;border-right: 1px solid #D5D5D5;font-size: 13.5px;line-height: 120%;font-weight: bold;padding: 8px 5px;text-align: left;}
.ui-resizable{position: relative;}
.ui-resizable-handle{display: block;font-size: 0.1px;position: absolute;z-index: 99999;}
.ui-resizable-s{background: #EEEEEE url(//ku.shouce.ren/files/images/201601/56a0dc3dbe60a.png) no-repeat scroll center 2px;border-top: 1px solid #CCCCCC;bottom: -5px;cursor: s-resize;height: 14px;left: 0;width: 100%;}
</style>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ku.shouce.ren/libs/jquery-ui/1/jquery-ui1.10.4.min.js"></script>
<script type="text/javascript">
(function($){
$.chromatable = {
    defaults: {
    width: "900px", 
	height: "300px",
	scrolling: "yes" 
  }	
};
$.fn.chromatable = function(options){
var options = $.extend({}, $.chromatable.defaults, options);
return this.each(function(){
var $this = $(this);
var $uniqueID = $(this).attr("ID") + ("wrapper");
$(this).css('width', options.width).addClass("_scrolling");
$(this).wrap('<div class="scrolling_outer"><div id="'+$uniqueID+'" class="scrolling_inner"></div></div>');
$(".scrolling_outer").css({'position':'relative'});
$("#"+$uniqueID).css(
													
	 {'border':'1px solid #CCCCCC',
		'overflow-x':'hidden',
		'overflow-y':'auto',
		'padding-right':'17px'						
		});

$("#"+$uniqueID).css('height', options.height);
$("#"+$uniqueID).css('width', options.width);
$(this).before($(this).clone().attr("id", "").addClass("_thead").css(
		{'width' : 'auto',
		 'display' : 'block', 
		 'position':'absolute', 
		 'border':'none', 
		 'border-bottom':'1px solid #CCC',
		 'top':'1px'
			}));
$('._thead').children('tbody').remove();
$(this).each(function( $this ){
	if (options.width == "100%" || options.width == "auto") {
		$("#"+$uniqueID).css({'padding-right':'0px'});
	}
	if (options.scrolling == "no") {
		$("#"+$uniqueID).before('<a href="#" class="expander" style="width:100%;">Expand table</a>');
		$("#"+$uniqueID).css({'padding-right':'0px'});
		$(".expander").each(
			function(int){
				$(this).attr("ID", int);
				$( this ).bind ("click",function(){
						$("#"+$uniqueID).css({'height':'auto'});
						$("#"+$uniqueID+" ._thead").remove();
						$(this).remove();
					});
				});
		$("#"+$uniqueID).resizable({ handles: 's' }).css("overflow-y", "hidden");
	}
});
$curr = $this.prev();
$("thead:eq(0)>tr th",this).each( function (i) {
	$("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
});
if (options.width == "100%" || "auto"){
		$(window).resize(function(){
		resizer($this);										
		});
	}
});
};
	function resizer($this) {
		$curr = $this.prev();
		$("thead:eq(0)>tr th", $this).each( function (i) {
			$("thead:eq(0)>tr th:eq("+i+")", $curr).width( $(this).width());
	});
};
})(jQuery);
$(document).ready(function(){
$("#yourTableID").chromatable({
		width: "100%",
		height: "400px",
		scrolling: "no" 
	});
$("#yourTableID2").chromatable({
		width: "900px",
		height: "400px",
		scrolling: "yes"
	});	
});
</script>
</head>
<body>
<table id="yourTableID2" width="100%" border="0" cellspacing="0" cellpadding="0">
<thead>
	<tr>
		<th>名称</th>
		<th>作者</th>
		<th>备注</th>
	</tr>
</thead>
<tbody>	
	<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
	<tr>
		<td>Some content goes in here</td>
		<td>Praesent vitae ligula nec orci pretium vestibulum</td>
		<td>Maecenas tempus dictum libero</td>
	</tr>
	<tr>
		<td>Quisque in wisi quis orci tincidunt fermentum</td>
		<td>Mauris aliquet mattis metus</td>
		<td>Etiam eu ante non leo egestas nonummy</td>
	</tr>
</tbody>	
</table>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

jquery固定表头不滚动让内容滚动的代码实现

分类

表格图层

描述

使用jquery的表格特效，控制表格的表头固定而不滚动，当用户拖动表格滚动条的时候，表格的每行内容是滚动的，表头并不会滚动，这样可始终让表格的表头与内容相对应，方便查看表格中的内容，对一个表格来说，我想这样的效果是非常实用哦。