HTML表格固定第一行第一列效果_table固定表头固定前两列资源-CSDN文库

共1个文件

htm：1个

excel效果

固定第一行列

2星需积分: 42 127 浏览量 2015-11-06 13:47:15 上传评论 3 收藏 1KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

表格固定第一行第一列效果（带注释）.rar （1个子文件）

表格固定第一行第一列效果（带注释）.htm 9KB

<!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"> <head> <title></title> <script src="http://code.jquery.com/jquery-1.7.1.js" type="text/javascript"></script> <style> .FormTable tr, .FormTable td, .FormTable th { border: solid 1px #cccccc; border-collapse: collapse; text-align: center; } .FormTable { border: solid 1px #cccccc; border-collapse: collapse; } .table-mask { position: relative; } #topdv { position:fixed; overflow:hidden; z-index:2; } #leftdv { position: fixed; overflow: hidden; z-index: 2; } #container{width:600px;height:300px;overflow:auto;} #toptable{width:1200px;} #datatable{width:1200px;} #toptable td{width:200px;background:gray;} #lefttable td{width:200px;background:white;} #toplefttbl td{width:200px;background:gray;} #datatable td{width:200px;} </style> <script> $(function () { //如果边框宽度一样，则宽度+1个右边框 //否则要宽度+左边框宽度+右边框宽度-本身边框宽度 var marginLeft = $("#toplefttbl").width() + parseInt($("#toplefttbl").css("border-right-width").replace("px", "")); var marginTop = $("#toplefttbl").height() + parseInt($("#toplefttbl").css("border-bottom-width").replace("px", "")); $("#toptable").css("margin-left", marginLeft + "px"); //设置顶部栏距左距离 $("#lefttable").css("margin-top", marginTop + "px"); //设置左边栏距上距离 //设置内容表格距左距上距离 $("#datatable").css("margin-left", marginLeft + "px"); $("#datatable").css("margin-top", marginTop + "px"); //顶部栏外层DIV宽度为总容器宽度-滚动轴宽度(16为滚动轴宽度) $("#topdv").css("width", $("#container").width() - 16); $("#leftdv").css("height", $("#container").height() - 16); //容器滚动事件 $("#container").scroll(function () { var currentScrollTop = $(this).scrollTop(); var currentScrollLeft = $(this).scrollLeft(); $("#topdv").find(".table-mask").css("left", -currentScrollLeft + "px"); $("#leftdv").find(".table-mask").css("top", -currentScrollTop + "px"); }); }) </script> </head> <body> <div id="container" > <div style="position: fixed;z-index: 3;"> <table id="toplefttbl" class="FormTable"> <tr> <td>编号</td> </tr> </table> </div> <div id="topdv"> <div class="table-mask"> <table id="toptable" class="FormTable"> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> </table> </div> </div> <div id="leftdv"> <div class="table-mask"> <table id="lefttable" class="FormTable"> <tr> <td>1</td> </tr> <tr> <td>2</td> </tr> <tr> <td>3</td> </tr> <tr> <td>4</td> </tr> <tr> <td>5</td> </tr> <tr> <td>6</td> </tr> <tr> <td>7</td> </tr> <tr> <td>8</td> </tr> <tr> <td>9</td> </tr> <tr> <td>10</td> </tr> <tr> <td>11</td> </tr> <tr> <td>12</td> </tr> <tr> <td>13</td> </tr> <tr> <td>14</td> </tr> <tr> <td>15</td> </tr> <tr> <td>16</td> </tr> <tr> <td>17</td> </tr> <tr> <td>18</td> </tr> <tr> <td>19</td> </tr> <tr> <td>20</td> </tr> <tr> <td>21</td> </tr> <tr> <td>22</td> </tr> </table> </div> </div> <div style="position: relative;z-index:1;"> <table id="datatable" class="FormTable"> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>国籍</td> <td>地区</td> </tr> <tr> <td>姓名</td>

评论收藏

内容反馈