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

转载 2013年12月02日 10:45:36

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


<!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(/jscss/demoimg/201311/grippie.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="/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="/ajaxjs/jquery-ui-1.8.20.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>


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

http://www.codefans.net/jscss/code/4717.shtml
  • ying890
  • ying890
  • 2015年01月30日 16:07
  • 773

[html][jQuery]表头固定在顶部的一种实现思路

有时候当碰到要显示很多行又很多列的表格的时候,往往在翻到后面的时候已经对不上某一列是什么了。 所以需要将表头固定在顶部,而且是在滚动到表头被遮住的时候,才固定到顶部。先看效果图再讲一下我的实现思路 ...
  • qq807081817
  • qq807081817
  • 2015年06月29日 15:44
  • 2928

jquery datatable设置垂直滚动后,表头(th)错位问题

jquery datatable设置垂直滚动后,表头(th)错位问题问题描述: 我在datatable里设置:”scrollY”: ‘300px’,垂直滚动属性后,表头的宽度就会错位,代码如下: ...
  • lamyuqingcsdn
  • lamyuqingcsdn
  • 2016年04月18日 14:20
  • 8392

导航菜单固定头部跟随屏幕滚动jQuery插件

(function($){ $.extend($.fn, { posfixed: function(configSettings){ var settings = ...
  • canglingyue
  • canglingyue
  • 2015年12月31日 16:20
  • 3290

实现table表头固定 内容滚动效果

html>      head>      style type="text/css">          /*所有内容都在这个DIV内*/          div.all {           ...
  • gwpJava
  • gwpJava
  • 2013年11月21日 15:25
  • 5504

表头固定内容可滚动表格的3种实现方法

有时候,我们在开发前端页面过程中,可能会用到这种表格:表头固定不动,表格内容()需要竖直滚动。 像这样的: 还有这样的: 通过研究,我大致总结了以下三种实现办法供大家参考,如果有错误之处敬请指正...
  • dragonpeng2008
  • dragonpeng2008
  • 2017年11月14日 10:43
  • 187

表头固定 内容滚动

  • 2016年08月15日 14:00
  • 9KB
  • 下载

表格表头固定 内容可以滚动(示例)

  • 2010年12月21日 10:43
  • 950B
  • 下载

Html中Table表头固定内容滚动以及checkbox右对齐

  • 2013年03月16日 10:56
  • 42KB
  • 下载

表头固定内容滚动,直接打开html即可运行

  • 2017年11月15日 09:51
  • 2KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery固定表头不滚动让内容滚动的代码实现
举报原因:
原因补充:

(最多只允许输入30个字)