方案一：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 500px;
overflow: scroll;
}
.inbox {
height: 100px;
width: 3000px;
background-color: aqua
}
.inbox td,.inbox th{
width: 300px
}
.inbox tbody td{
text-align: center;
}
.left{
width: 300px;
color: blue;
font-weight: bold;
background-color: aqua;
height: 100%;
position: absolute;
left: 0;
top: 0;
}
.right{
width: 300px;
color: blue;
font-weight: bold;
background-color: aqua;
height: 100%;
position: absolute;
right: 0;
top: 0;
}
.left td,.left th{
width: 300px
}
.left tbody td{
text-align: center
}
.right td,.right th{
width: 300px
}
.right tbody td{
text-align: center
}
</style>
</head>
<body>
<div id="ex" class="box">
<div id="inL"class="left">
<table border="1" width="100%">
<thead>
<tr>
<th>1</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
</tr> -->
</tbody>
</table>
</div>
<table class="inbox" border="1" width="100%">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
<th>10</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
</tr>
</tbody>
</table>
<div id="inR"class="right">
<table border="1" width="100%">
<thead>
<tr>
<th>10</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>10</td>
</tr> -->
</tbody>
</table>
</div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
$("#ex").scroll(()=>{
let left = $("#ex").scrollLeft()
$("#inL").css({"position":"absolute","left":left,"top":"0"})
$("#inR").css({"position":"absolute","right":-left,"top":"0"})
})
</script>
</body>
</html>方案二：
<html>
<head>
<title>表格的冻结列实现</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<!--如果冻结列不好使，给tableDiv也设置一个position:relative;-->
<div id="tableDiv" style="width:500px;overflow-x:auto;">
<table style="width:720px;">
<tr>
<td style="width:100px;">迭代名称</td>
<td style="width:80px;">得分</td>
<td style="width:100px;">代码覆盖率</td>
<td style="width:120px;">新需求个数</td>
<td style="width:160px;">通过的需求个数</td>
<td style="width:160px;">未通过的需求个数</td>
</tr>
<tr>
<td>迭代一</td>
<td>45</td>
<td>56%</td>
<td>450</td>
<td>12</td>
<td>90</td>
</tr>
<tr>
<td>迭代五</td>
<td>36</td>
<td>78%</td>
<td>216</td>
<td>97</td>
<td>12</td>
</tr>
<tr>
<td>迭代三</td>
<td>37</td>
<td>91%</td>
<td>404</td>
<td>17</td>
<td>34</td>
</tr>
</table>
</div>
<script>
$("#tableDiv").scroll(function(){//给table外面的div滚动事件绑定一个函数
var left=$("#tableDiv").scrollLeft();//获取滚动的距离
var trs=$("#tableDiv table tr");//获取表格的所有tr
trs.each(function(i){//对每一个tr（每一行）进行处理
//获得每一行下面的所有的td，然后选中下标为0的，即第一列，设置position为相对定位
//相对于父div左边的距离为滑动的距离，然后设置个背景颜色，覆盖住后面几列数据滑动到第一列下面的情况
//如果有必要也可以设置一个z-index属性
$(this).children().eq(0).css({"position":"relative","top":"0px","left":left,"background-color":"white"});
});
});
</script>
</body>
</html>
4915
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
