<!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>
表格固定第一行第一列效果（带注释）.rar （1个子文件） 
表格固定第一行第一列效果（带注释）.htm 9KB资源评论
- [纳川]2019-12-11第一列和后面的对不齐,没法用
- Seaiio2018-09-28很实用，非常感谢
- Capricornph2017-05-09没用，第一行跟第一列还要单独拉出来！不方便！
- qq11217690742016-07-28对我没什么作用，当其中一个文字过多撑大单元格时，后面的全部位置都有错位
