使用div的position:fixed或者position:absolute属性把div固定位置，然后调试div的宽度和table的td宽度即可
1、固定第一列
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试固定table的列</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("p").click(function(){
});
});
</script>
</head>
<body>
<div style="height:300px;overflow-x:scroll;margin-left:100px;width:150px;">
<div style="position:fixed;height:280px;background-color:white;z-index:9999;width:50px;">1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1<br/>1</div>
<table border=1 style="border-collapse:separate; border-spacing:10px;">
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
</table>
<table border=1 style="overflow-x: scroll;border-collapse:separate; border-spacing:10px;">
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
</table>
<table border=1 style="overflow-x: scroll;border-collapse:separate; border-spacing:10px;">
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td><td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td><td>7</td>
</tr>
</table>
</div>
</body>
</html>
2、固定第一行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试固定table的列</title>
<style type="text/css">
.freezeTd {
vertical-align: middle;
font-size: 10px;
background-color: white;
}
#scrollid table tr td {
vertical-align: middle;
height: 30px;
text-align: center;
border: 0.5px solid #A9A9A9;
}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(function(){
freezeTd();
})
function freezeTd() {
$("#scrollid").scroll(function() { //给table外面的div滚动事件绑定一个函数
//var left = $("#scrollid").scrollLeft(); //获取横向滚动的距离
var up = $("#scrollid").scrollTop(); //获取纵向滚动的距离
if (up > 5) { up = up - 5; } //防止纵向滚动时向上冒出
var trs = $("#scrollid table tr");
trs.each(function(i) {
if ($(this).attr("class") == "freezeTr") {
$(this).children(".freezeTd").css({
"position": "relative",
"top": up,
//"left": left,
//"background-color": "white",
"z-index": "9999"
});
} else {
$(this).children(".freezeTd").css({
"position": "relative",
"top": "0px"
// "left": left,
// "background-color": "white"
});
}
});
});
}
</script>
</head>
<body>
<div style="overflow-x:scroll; overflow-y: scroll;width:500px;height:150px;" id="scrollid">
<table cellspacing="0" cellpadding="0" style="width:120%;margin-top:5px;">
<tr class="freezeTr">
<th class="freezeTd">姓名</th>
<th class="freezeTd">年龄</th>
<th class="freezeTd">班级</th>
<th class="freezeTd">性别</th>
</tr>
<tr>
<td >张三</td>
<td>12</td>
<td>六一班</td>
<td>男</td>
</tr>
<tr>
<td >李四</td>
<td>12</td>
<td>六一班</td>
<td>男</td>
</tr>
<tr>
<td >王五</td>
<td>12</td>
<td>六一班</td>
<td>男</td>
</tr>
<tr>
<td>赵六</td>
<td>12</td>
<td>六二班</td>
<td>男</td>
</tr>
<tr>
<td>余七</td>
<td>12</td>
<td>六二班</td>
<td>女</td>
</tr>
<tr>
<td>张三</td>
<td>12</td>
<td>六一班</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>12</td>
<td>六一班</td>
<td>男</td>
</tr>
<tr>
<td>王五</td>
<td>12</td>
<td>六一班</td>
<td>男</td>
</tr>
<tr>
<td>赵六</td>
<td>12</td>
<td>六二班</td>
<td>男</td>
</tr>
<tr>
<td>余七</td>
<td>12</td>
<td>六二班</td>
<td>女</td>
</tr>
</table>
</div>
</body>
</html>
