经验分享程序开发文档资料数据资源其它资源

jQuery带滚动条头部固定表格代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery带滚动条头部固定表格代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jQuery带滚动条头部固定表格代码

HTML代码(index.html):

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>jQuery带滚动条头部固定表格代码</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<link rel="stylesheet" type="text/css" href="thirdParty/easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="thirdParty/easyui/themes/icon.css">
<link rel="stylesheet" href="css/base.css"/>
<link rel="stylesheet" href="css/style.css"/>
<script src="thirdParty/jquery/jquery-1.9.1.min.js"></script>
<script src="thirdParty/easyui/jquery.easyui.min.js"></script>
<script src="thirdParty/easyui/easyui-lang-zh_CN.js"></script>

</head>
<body class="full-page">
<div class="queryBox">

<!-- 列表-->
<div class="queryList">
	<table class="easyui-datagrid" cellspacing="0" cellpadding="0" width="100%" height="260"
		   data-options="
			singleSelect: true,
			collapsible: true,
			fitColumns: true,
			url: '',
			method: 'get',
			onLoadSuccess: function(){
				$(this).datagrid('freezeRow');
			}">
		<thead data-options="frozen:true">
		<tr>
			<th data-options="frozen:true,field:'operate'">操作</th>
			<th data-options="frozen:true,field:'name'">姓名</th>
			<th data-options="frozen:true,field:'sex'">性别</th>
			<th data-options="frozen:true,field:'birth'">出生日期</th>
		</tr>
		</thead>
		<thead>
		<tr class="listTit tabTh">
			<th data-options="frozen:true,field:'file'">证件类型</th>
			<th data-options="frozen:true,field:'number'">证件号码</th>
			<th data-options="frozen:true,field:'tel'">固定电话</th>
			<th data-options="frozen:true,field:'mobile'">手机号码</th>
			<th data-options="frozen:true,field:'people'">联系人电话</th>
			<th data-options="frozen:true,field:'date'">预约日期</th>
			<th data-options="frozen:true,field:'sftx'">随访提醒</th>
			<th data-options="frozen:true,field:'way'">随访方式</th>
			<th data-options="frozen:true,field:'mcdate'">末次随访日期</th>
			<th data-options="frozen:true,field:'mociblood'">末次随访血糖</th>
			<th data-options="frozen:true,field:'manager'">业务管理机构</th>
			<th data-options="frozen:true,field:'bgdate'">报告日期</th>
			<th data-options="frozen:true,field:'bgdw'">报告单位</th>
			<th data-options="frozen:true,field:'bgdoctor'">报告医生</th>
			<th data-options="frozen:true,field:'bgaddress'">报告地址</th>
		</tr>
		</thead>

		<tbody id="content" class="easyui-panel" style="height:200px"
			   data-options="href:''">
		<tr class="listTr">
			<td><a href="tnb.html" class="lookBtn">查看</a><a href="" class="lookBtn">编辑</a><a href="" class="lookBtn">编辑</a></td>
			<td>张XX</td>
			<td>男</td>
			<td>1965-12-20</td>
			<td>身份证号身份证号身份证号身份证号身份证号身份证号身份证号身份证号</td>
			<td>310110199001010123</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td>北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市北京市</td>
		</tr>
		<tr class="listTr">
			<td><a href="tnb.html" class="lookBtn">查看</a></td>
			<td>张XX</td>
			<td>男</td>
			<td>1965-12-20</td>
			<td>身份证号</td>
			<td>310110199001010123</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr class="listTr">
			<td><a href="tnb.html" class="lookBtn">查看</a></td>
			<td>张XX</td>
			<td>男</td>
			<td>1965-12-20</td>
			<td>身份证号</td>
			<td>310110199001010123</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr class="listTr">
			<td><a href="tnb.html" class="lookBtn">查看</a></td>
			<td>张XX</td>
			<td>男</td>
			<td>1965-12-20</td>
			<td>身份证号</td>
			<td>310110199001010123</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr class="listTr">
			<td><a href="tnb.html" class="lookBtn">查看</a></td>
			<td>张XX</td>
			<td>男</td>
			<td>1965-12-20</td>
			<td>身份证号</td>
			<td>310110199001010123</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr class="listTr">
			<td><a href="tnb.html" class="lookBtn">查看</a></td>
			<td>张XX</td>
			<td>男</td>
			<td>1965-12-20</td>
			<td>身份证号</td>
			<td>310110199001010123</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr class="listTr">
			<td><a href="tnb.html" class="lookBtn">查看</a></td>
			<td>张XX</td>
			<td>男</td>
			<td>1965-12-20</td>
			<td>身份证号</td>
			<td>310110199001010123</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr class="listTr">
			<td><a href="tnb.html" class="lookBtn">查看</a></td>
			<td>张XX</td>
			<td>男</td>
			<td>1965-12-20</td>
			<td>身份证号</td>
			<td>310110199001010123</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr class="listTr">
			<td><a href="tnb.html" class="lookBtn">查看</a></td>
			<td>张XX</td>
			<td>男</td>
			<td>1965-12-20</td>
			<td>身份证号</td>
			<td>310110199001010123</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr class="listTr">
			<td><a href="tnb.html" class="lookBtn">查看</a></td>
			<td>张XX</td>
			<td>男</td>
			<td>1965-12-20</td>
			<td>身份证号</td>
			<td>310110199001010123</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr class="listTr">
			<td><a href="tnb.html" class="lookBtn">查看</a></td>
			<td>张XX</td>
			<td>男</td>
			<td>1965-12-20</td>
			<td>身份证号</td>
			<td>310110199001010123</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr class="listTr">
			<td><a href="tnb.html" class="lookBtn">查看</a></td>
			<td>张XX</td>
			<td>男</td>
			<td>1965-12-20</td>
			<td>身份证号</td>
			<td>310110199001010123</td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		</tbody>
	</table>
</div>
</div>
</body>
</html>

CSS代码(base.css):

@charset "utf-8";/* CSS Document */
*{margin:0;padding:0;list-style-type:none;}
html{overflow-x:hidden;-webkit-text-size-adjust:none;}
body,dl,dd,h1,h2,h3,h4,h5,h6,p,form,ol,ul,li{margin:0;padding:0;}
body{font:12px "微软雅黑",arial;}
a{text-decoration:none;outline:none;}
input{outline:none;}
img{vertical-align:top;}
img,button,input{border:none;}
table{border-collapse:collapse;border-spacing:0;}
i{font-style:normal;}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
em{font-style:normal;}
ul,li{list-style:none;}
input[button]{cursor:pointer;}
/*clearfix清除浮动*/
.clearfix:after{visibility:hidden;display:block;content:" ";clear:both;height:0;line-height:0;}
.clearfix{zoom:1;}
.fontw{font-family:"微软雅黑",arial;}
.bg01{background:#fff;}
.fl{float:left;}
.fr{float:right;}
.tl{text-align:left;}
.tc{text-align:center;}
.tr{text-align:right;}
::-webkit-scrollbar{width:6px;height:6px;}
/*垂直方向的下按钮*/
::-webkit-scrollbar-button:vertical:increment{background:#D6F0FF;height:6px;}
/*横向的右边按钮*/
::-webkit-scrollbar-button:horizontal:increment{/*background:#D6F0FF url(/FronWeb/Images/y1204.png) no-repeat 2px 0px;*/
 width:6px;}
/*垂直方向的上按钮*/
::-webkit-scrollbar-button:vertical:decrement{/*background:#D6F0FF url(/FronWeb/Images/s1204.png) no-repeat 1px -2px;*/
 height:6px;}
/*横向的左按钮*/
::-webkit-scrollbar-button:horizontal:decrement{/*background:#D6F0FF url(/FronWeb/Images/z1204.png) no-repeat 1px 0px;*/
 width:6px;}
/*滚动槽的颜色 */
::-webkit-scrollbar-track-piece{background-color:#d6f0ff;}
/* 滑轮的颜色 */
::-webkit-scrollbar-thumb:vertical{height:10px;background-color:#9cdbff;border:1px solid #7bcfff;border-radius:4px;}
::-webkit-scrollbar-thumb:horizontal{height:10px;background-color:#9cdbff;border:1px solid #7bcfff;border-radius:4px;}

CSS代码(style.css):

.queryList{width:100%;margin-top:18px;border-right:1px solid #95B8E7;}
.queryList table{table-layout:fixed;}
.queryList table th,.queryList table td{white-space:nowrap;}
.queryList table#pageTab{margin-top:0px;}
.queryList table tr.listTit{background:url("../images/titBg.png") repeat-x left bottom;}
.queryList table tr.listTit th{height:21px;color:#000;padding:0 6px;text-align:center;border-right:1px solid #B7BABC;border-bottom:1px solid #B7BABC;font-weight:normal;}
.queryList table tr.listTit td{height:21px;color:#000;padding:0 7px;text-align:center;}
.queryList table td{height:26px;text-align:center;border-right:1px solid #B7BABC;padding:0 6px;border-bottom:1px solid #B7BABC;word-wrap:break-word;}
.queryList table .grayBg{background:#f7f7f7;}
.queryList table .hoverBg{background:#B2E1FF;}
.queryList .lookBtn{text-decoration:underline;color:#1A6968;margin:0 4px;}
.queryList{width:100%;overflow-x:hidden;}
.queryBox{width:900px;margin:0 auto;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
401.53 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
401.53 KB
立即下载
夏菲
了解
打赏作者 鼓励作者
Html Js 滚动条
最新结算
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
HTM5 Canvas实现3D飞机飞行动画特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery图像缩放工具插件Zoomer特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
Labelauty–jQuery单选框_复选框美化插件特效代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery网页版打砖块小游戏源码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章