jQuery表格顶部与左右两侧固定滚动代码.zip资源-CSDN文库

共4个文件

js：2个

html：1个

css：1个

版权申诉

jquery代码

jquery特效

jquery插件

jquery实例

47 浏览量 2023-09-22 00:19:23 上传评论 1 收藏 39KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery表格顶部与左右两侧固定滚动代码.zip （4个子文件）

fixed-table.js 17KB

jquery.min.js 91KB

css

fixed-table.css 4KB

index.html 12KB

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>jQuery表格顶部与左右两侧固定滚动代码</title> <link rel="stylesheet" href="css/fixed-table.css" /> <script src="js/jquery.min.js"></script> <script src="js/fixed-table.js"></script> <style> .fixed-table-box{ width: 800px; margin: 50px auto; } .fixed-table-box>.fixed-table_body-wraper{/*内容了表格主体内容有纵向滚动条*/ max-height: 260px; } .fixed-table_fixed>.fixed-table_body-wraper{/*为了让两侧固定列能够同步表格主体内容滚动*/ max-height: 240px; } .w-150{ width: 150px; } .w-120{ width: 120px; } .w-300{ width: 300px; } .w-100{ width: 100px; } .btns{ text-align: center; } .btns button{ padding: 10px 20px; } </style> </head> <body><script src="/demos/googlegg.js"></script> <div class="fixed-table-box row-col-fixed">  <div class="fixed-table_header-wraper"> <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0"> <thead> <tr> <th class="w-150" data-fixed="true"><div class="table-cell">日期</div></th> <th class="w-120"><div class="table-cell">姓名</div></th> <th class="w-120"><div class="table-cell">省份</div></th> <th class="w-120"><div class="table-cell">市区</div></th> <th class="w-300"><div class="table-cell">地址</div></th> <th class="w-120"><div class="table-cell">邮编</div></th> <th class="w-100" data-fixed="true" data-direction="right"><div class="table-cell">操作</div></th> </tr> </thead> </table> </div>   <div class="fixed-table_body-wraper"> <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> <td class="w-120"><div class="table-cell">王小虎</div></td> <td class="w-120"><div class="table-cell">上海</div></td> <td class="w-120"><div class="table-cell">普陀区</div></td> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td> <td class="w-120"><div class="table-cell">200333</div></td> <td class="w-100"> <div class="table-cell"> <a href="###">查看</a> <a href="###">编辑</a> </div> </td> </tr> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> <td class="w-120"><div class="table-cell">王小虎</div></td> <td class="w-120"><div class="table-cell">上海</div></td> <td class="w-120"><div class="table-cell">普陀区</div></td> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td> <td class="w-120"><div class="table-cell">200333</div></td> <td class="w-100"> <div class="table-cell"> <a href="###">查看</a> <a href="###">编辑</a> </div> </td> </tr> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> <td class="w-120"><div class="table-cell">王小虎</div></td> <td class="w-120"><div class="table-cell">上海</div></td> <td class="w-120"><div class="table-cell">普陀区</div></td> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td> <td class="w-120"><div class="table-cell">200333</div></td> <td class="w-100"> <div class="table-cell"> <a href="###">查看</a> <a href="###">编辑</a> </div> </td> </tr> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> <td class="w-120"><div class="table-cell">王小虎</div></td> <td class="w-120"><div class="table-cell">上海</div></td> <td class="w-120"><div class="table-cell">普陀区</div></td> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td> <td class="w-120"><div class="table-cell">200333</div></td> <td class="w-100"> <div class="table-cell"> <a href="###">查看</a> <a href="###">编辑</a> </div> </td> </tr> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> <td class="w-120"><div class="table-cell">王小虎</div></td> <td class="w-120"><div class="table-cell">上海</div></td> <td class="w-120"><div class="table-cell">普陀区</div></td> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td> <td class="w-120"><div class="table-cell">200333</div></td> <td class="w-100"> <div class="table-cell"> <a href="###">查看</a> <a href="###">编辑</a> </div> </td> </tr> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> <td class="w-120"><div class="table-cell">王小虎</div></td> <td class="w-120"><div class="table-cell">上海</div></td> <td class="w-120"><div class="table-cell">普陀区</div></td> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td> <td class="w-120"><div class="table-cell">200333</div></td> <td class="w-100"> <div class="table-cell"> <a href="###">查看</a> <a href="###">编辑</a> </div> </td> </tr> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> <td class="w-120"><div class="table-cell">王小虎</div></td> <td class="w-120"><div class="table-cell">上海</div></td> <td class="w-120"><div class="table-cell">普陀区</div></td> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td> <td class="w-120"><div class="table-cell">200333</div></td> <td class="w-100"> <div class="table-cell"> <a href="###">查看</a> <a href="###">编辑</a> </div> </td> </tr> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> <td class="w-120"><div class="table-cell">王小虎</div></td> <td class="w-120"><div class="table-cell">上海</div></td> <td class="w-120"><div class="table-cell">普陀区</div></td> <td class="w-300"><div class="table-cell">上海市普陀区金沙江路 1518 路</div></td> <td class="w-120"><div class="table-cell">200333</div></td> <td class="w-100"> <div class="table-cell"> <a href="###">查看</a> <a href="###">编辑</a> </div> </td> </tr> </tbody> </table> </div>   <div class="fixed-table_fixed fixed-table_fixed-left"> <div class="fixed-table_header-wraper"> <table class="fixed-table_header" cellspacing="0" cellpadding="0" border="0"> <thead> <tr> <th class="w-150"><div class="table-cell">日期</div></th> </tr> </thead> </table> </div> <div class="fixed-table_body-wraper"> <table class="fixed-table_body" cellspacing="0" cellpadding="0" border="0"> <tbody> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> </tr> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> </tr> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> </tr> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> </tr> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> </tr> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> </tr> <tr> <td class="w-150"><div class="table-cell"> 2016-05-03</div></td> </tr> <tr> <td class="w-150"><div class="tabl

评论收藏

内容反馈

版权申诉