---恢复内容开始---

PS:文中代码大部分不出自原创，在原有的基础上修改成自己想要的效果给大家参考，如有不妥，请联系我删除。

该效果由纯html+css实现，经测试不支持IE，需要支持IE版本参考下一篇文章。

---恢复内容结束---

全部代码如下：

-----------------------------------------------------------------------代码-begin-----------------------------------------------------------------------------------

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
html{
height:100%;
overflow:auto;
}
 body{
height:100%;
overflow:auto;
}
.contain {
border: 1px solid #cdd;
width: 800px;
height: 400px;
overflow: scroll;
position: relative;
float: left;
top: 100px;
left: 50px;
}
th, td, tr {
border: 1px solid #cdd;
height: 30px;
width: 100px;
text-align: center;
}

.div_ta{
height:158px;
line-height:150px;
}
div{
text-align:center;
}
.div_ta1{
width:80px;
}
.div_ta2{
width:150px;
}
.div_ta3{
height:20px;
width:50px;
}
.tb1 {
background: gray;
position: fixed;
z-index: 10001;
width: 100px;
height:150px;
}
.tb2 {
background: gray;
position: sticky;
top: 0px;
margin-left: 316px;
width: 500px;
z-index: 1000;
}
.tb3 {
background: gray;
left: 0px;
height: 100%;
float: left;
position: sticky;
z-index: 1000;
width: 100px;
}

.tb4 {
left: 316px;
width: 500px;
position: absolute;
}
</style>

</head>
<body>
<div class="contain">
<table class="tb1" cellspacing="0">
<thead>
<tr>
<th rowspan="5">
<div class="div_ta div_ta1" >序号</div>
</th>
<th rowspan="5" >
<div class="div_ta div_ta2"> 名称</div>
</th>
<th rowspan="5" >
<div class="div_ta div_ta1"> 单位类别</div>
</th>
</tr>
</thead>

</table>
<table class="tb2 " cellspacing="0">
<thead>
<tr>
<th colspan="5">在编总人数</th>
<th colspan="26">在岗人员</th>
<th colspan="20">不在岗人员</th>
<th colspan="9">编外人员</th>
<th rowspan="2" colspan="3"> 离休、退休（职）</th>
<th rowspan="5">
<div class="div_ta3"> 校级干部</div>
</th>
<th rowspan="5">
<div class="div_ta3"> 在编变化</div>
</th>
<th rowspan="5">
<div class="div_ta3"> 离休变化</div>
</th>
<th rowspan="5">
<div class="div_ta3"> 退休变化</div>
</th>
<th rowspan="5">
<div class="div_ta3"> 退职变化</div>
</th>
</tr>
<tr>
<th rowspan="4"> <div class="div_ta3">小计</div> </th>
<th rowspan="2" colspan="2">专技</th>
<th rowspan="4"><div class="div_ta3">管理</div> </th>
<th rowspan="4"><div class="div_ta3">工勤</div> </th>
<th colspan="5">在岗人数</th>
<th colspan="5">本单位在岗 </th>
<th colspan="16">外借</th>
<th colspan="5">不在岗人数 </th>
<th colspan="5">内退 </th>
<th colspan="5">长病假 </th>
<th colspan="5">其他不在岗人员</th>
<th rowspan="4"><div class="div_ta3">编外人员小计</div> </th>
<th colspan="3">退休返聘 </th>
<th colspan="5">劳务派遣</th>
</tr>
<tr>
<th rowspan="3"><div class="div_ta3">小计</div> </th>
<th colspan="2">专技 </th>
<th rowspan="3"><div class="div_ta3">管理</div> </th>
<th rowspan="3"><div class="div_ta3">工勤</div> </th>
<th rowspan="3"><div class="div_ta3">小计</div> </th>
<th colspan="2">专技 </th>
<th rowspan="3"><div class="div_ta3">管理</div> </th>
<th rowspan="3"><div class="div_ta3">工勤</div> </th>
<th colspan="5">社区 </th>
<th colspan="5">挂编 </th>
<th rowspan="3"><div class="div_ta3">支教教师</div> </th>
<th colspan="5">其他外借 </th>
<th rowspan="3"><div class="div_ta3">小计</div> </th>
<th colspan="2">专技 </th>
<th rowspan="3"><div class="div_ta3">管理</div> </th>
<th rowspan="3"><div class="div_ta3">工勤</div> </th>
<th rowspan="3"><div class="div_ta3">小计</div> </th>
<th colspan="2">专技 </th>
<th rowspan="3"><div class="div_ta3">管理</div> </th>
<th rowspan="3"><div class="div_ta3">工勤</div> </th>
<th rowspan="3"><div class="div_ta3">小计</div> </th>
<th colspan="2">专技 </th>
<th rowspan="3"><div class="div_ta3">管理</div> </th>
<th rowspan="3"><div class="div_ta3">工勤</div> </th>
<th rowspan="3"><div class="div_ta3">小计</div> </th>
<th colspan="2">专技 </th>
<th rowspan="3"><div class="div_ta3">管理</div> </th>
<th rowspan="3"><div class="div_ta3">工勤</div> </th>
<th rowspan="3"><div class="div_ta3">小计</div> </th>
<th rowspan="3"><div class="div_ta3">教师</div> </th>
<th rowspan="3"><div class="div_ta3">非教师</div> </th>
<th rowspan="3"><div class="div_ta3">小计</div> </th>
<th colspan="2">专技 </th>
<th rowspan="3"><div class="div_ta3">管理</div> </th>
<th rowspan="3"><div class="div_ta3">工勤</div> </th>
<th rowspan="3"><div class="div_ta3">离休</div> </th>
<th rowspan="3"><div class="div_ta3">退休</div> </th>
<th rowspan="3"><div class="div_ta3">退职</div> </th>
</tr>
<tr>
<th rowspan="2"><div class="div_ta3">教师</div></th>
<th rowspan="2"><div class="div_ta3">旁系列</div></th>
<th rowspan="2"><div class="div_ta3">教师</div></th>
<th rowspan="2"><div class="div_ta3">旁系列</div></th>
<th rowspan="2"><div class="div_ta3">教师</div></th>
<th rowspan="2"><div class="div_ta3">旁系列</div></th>
<th rowspan="2"><div class="div_ta3">小计</div></th>
<th colspan="2"><div class="div_ta3">专技</div></th>
<th rowspan="2"><div class="div_ta3">管理</div></th>
<th rowspan="2"><div class="div_ta3">工勤</div></th>
<th rowspan="2"><div class="div_ta3">小计</div></th>
<th colspan="2"><div class="div_ta3">专技</div></th>
<th rowspan="2"><div class="div_ta3">管理</div></th>
<th rowspan="2"><div class="div_ta3">工勤</div></th>
<th rowspan="2"><div class="div_ta3">小计</div></th>
<th colspan="2"><div class="div_ta3">专技</div></th>
<th rowspan="2"><div class="div_ta3">管理</div></th>
<th rowspan="2"><div class="div_ta3">工勤</div></th>
<th rowspan="2"><div class="div_ta3">教师</div></th>
<th rowspan="2"><div class="div_ta3">旁系列</div></th>
<th rowspan="2"><div class="div_ta3">教师</div></th>
<th rowspan="2"><div class="div_ta3">旁系列</div></th>
<th rowspan="2"><div class="div_ta3">教师</div></th>
<th rowspan="2"><div class="div_ta3">旁系列</div></th>
<th rowspan="2"><div class="div_ta3">教师</div></th>
<th rowspan="2"><div class="div_ta3">旁系列</div></th>
<th rowspan="2"><div class="div_ta3">教师</div></th>
<th rowspan="2"><div class="div_ta3">旁系列</div></th>
</tr>
<tr>
<th><div class="div_ta3">教师</div></th>
<th><div class="div_ta3">旁系列</div></th>
<th><div class="div_ta3">教师</div></th>
<th><div class="div_ta3">旁系列</div></th>
<th><div class="div_ta3">教师</div></th>
<th><div class="div_ta3">旁系列</div></th>
</tr>
</thead>
</table>
<table class="tb3" cellspacing="0">
<tbody>
<tr>
<td><div class="div_ta1">45</div></td>
<td><div class="div_ta2">名称一</div></td>
<td><div class="div_ta1">初中</div></td>
</tr>
<tr>
<td><div class="div_ta1">45</div></td>
<td><div class="div_ta2">名称一</div></td>
<td><div class="div_ta1">初中</div></td>
</tr>
<tr>
<td><div class="div_ta1">45</div></td>
<td><div class="div_ta2">名称一</div></td>
<td><div class="div_ta1">初中</div></td>
</tr>
<tr>
<td><div class="div_ta1">45</div></td>
<td><div class="div_ta2">名称一</div></td>
<td><div class="div_ta1">初中</div></td>
</tr>
<tr>
<td><div class="div_ta1">45</div></td>
<td><div class="div_ta2">名称一</div></td>
<td><div class="div_ta1">初中</div></td>
</tr>
<tr>
<td><div class="div_ta1">45</div></td>
<td><div class="div_ta2">名称一</div></td>
<td><div class="div_ta1">初中</div></td>
</tr>
<tr>
<td><div class="div_ta1">45</div></td>
<td><div class="div_ta2">名称一</div></td>
<td><div class="div_ta1">初中</div></td>
</tr>
<tr>
<td><div class="div_ta1">45</div></td>
<td><div class="div_ta2">名称一</div></td>
<td><div class="div_ta1">初中</div></td>
</tr>
<tr>
<td><div class="div_ta1">45</div></td>
<td><div class="div_ta2">名称一</div></td>
<td><div class="div_ta1">初中</div></td>
</tr>
<tr>
<td><div class="div_ta1">45</div></td>
<td><div class="div_ta2">名称一</div></td>
<td><div class="div_ta1">初中</div></td>
</tr>
<tr>
<td><div class="div_ta1">45</div></td>
<td><div class="div_ta2">名称一</div></td>
<td><div class="div_ta1">初中</div></td>
</tr>
<tr>
<td><div class="div_ta1">45</div></td>
<td><div class="div_ta2">名称一</div></td>
<td><div class="div_ta1">初中</div></td>
</tr>
<tr>
<td><div class="div_ta1">45</div></td>
<td><div class="div_ta2">名称一</div></td>
<td><div class="div_ta1">初中</div></td>
</tr>
</tbody>
</table>
<table class="tb4" cellspacing="0">
<tbody>
<tr>

<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>

<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
<td><div class="div_ta3">42</div></td>
</tr>
<tr>
<td>84</td>
<td>41</td>
<td>8</td>
<td>7</td>
<td>12</td>

<td>83</td>
<td>41</td>
<td>7</td>
<td>7</td>
<td>8</td>

<td>83</td>
<td>41</td>
<td>7</td>
<td>7</td>
<td>8</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>3</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>34</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>45</td>
<td>57</td>
<td>4</td>
<td>1</td>
<td>1</td>

<td>44</td>
<td>57</td>
<td>4</td>
<td>1</td>
<td>2</td>

<td>44</td>
<td>57</td>
<td>4</td>
<td>1</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>1</td>

<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>1</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>135</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>-87</td>
<td>-1</td>
<td>-214</td>
<td></td>
</tr>

<tr>
<td>54</td>
<td>43</td>
<td>8</td>
<td>1</td>
<td>2</td>

<td>54</td>
<td>43</td>
<td>8</td>
<td>1</td>
<td>2</td>

<td>54</td>
<td>43</td>
<td>8</td>
<td>1</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>5</td>

<td>5</td>
<td>1</td>
<td>4</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>7</td>
<td>243</td>
<td>2</td>

<td>3</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>54</td>
<td>41</td>
<td>5</td>
<td>1</td>
<td>1</td>

<td>55</td>
<td>48</td>
<td>5</td>
<td>1</td>
<td>1</td>

<td>54</td>
<td>47</td>
<td>5</td>
<td>1</td>
<td>1</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>3</td>
<td>254</td>
<td>2</td>

<td>3</td>

<td>-1</td>
<td>2</td>
<td>1</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>87</td>
<td>74</td>
<td>8</td>
<td>2</td>
<td>3</td>

<td>84</td>
<td>74</td>
<td>7</td>
<td>2</td>
<td>3</td>

<td>84</td>
<td>74</td>
<td>7</td>
<td>2</td>
<td>3</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>243</td>
<td>2</td>

<td>3</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>83</td>
<td>75</td>
<td>3</td>
<td>2</td>
<td>3</td>

<td>82</td>
<td>74</td>
<td>3</td>
<td>2</td>
<td>3</td>

<td>82</td>
<td>74</td>
<td>3</td>
<td>2</td>
<td>3</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>1</td>
<td>222</td>
<td>2</td>

<td>4</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td></td>
</tr>

<tr>
<td>42</td>
<td>42</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>42</td>
<td>42</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>31</td>
<td>31</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>1</td>
<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>1</td>
<td>424</td>
<td>2</td>

<td>1</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>84</td>
<td>41</td>
<td>8</td>
<td>7</td>
<td>12</td>

<td>83</td>
<td>41</td>
<td>7</td>
<td>7</td>
<td>8</td>

<td>83</td>
<td>41</td>
<td>7</td>
<td>7</td>
<td>8</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>3</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>34</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>45</td>
<td>57</td>
<td>4</td>
<td>1</td>
<td>1</td>

<td>44</td>
<td>57</td>
<td>4</td>
<td>1</td>
<td>2</td>

<td>44</td>
<td>57</td>
<td>4</td>
<td>1</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>1</td>

<td>1</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>1</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>135</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>
<td>2</td>
<td>2</td>

<td>2</td>

<td>-87</td>
<td>-1</td>
<td>-214</td>
<td></td>
</tr>
</table>
</div>
</body>

</html>

-----------------------------------------------------------------------代码-end-----------------------------------------------------------------------------------

实现效果如下：

不滚动效果：

向下滚动效果：

向左右滑动效果：

完

转载于:https://www.cnblogs.com/Beata-hu/p/9950902.html

table固定表头行及列，其中行包含合并单元格相关推荐

  1. 【Easyexcel】使用easyexcel导出带有固定表头的excel代码，并且有合并单元格操作

    以下是一个使用EasyExcel导出带有固定表头并且带有合并单元格的Excel代码示例: //创建excel对象 ExcelWriter writer = EasyExcel.write(" ...

  2. table固定表头和首列

    table固定表头和首列 html部分,结构上分为左右两部分,又分别拆开为上下两部分,总共四个结构部分,以下为固定首行和首列,需要固定多行多列的可以自行添加,如下列表中姓名为左上角固定不变的位置,可自 ...

  3. 纯CSS实现Table固定表头和首列

    Table固定表头和首列这种需求应该比较常见.以往的做法,需要写一大堆脚本,而现在,可以使用position:sticky轻松实现这个效果. .table-container {width: 100% ...

  4. POI Excel复制行（支持复制样式、合并单元格、形状）

    目录 1 Maven依赖 2 实现代码 3 调试代码 4 模板内容 5 调试结果 ​ 注: 1 Maven依赖 <!-- easyExcel Excel文档处理工具 --><depe ...

  5. vue + elementui table 列内容相同 自动合并单元格 完整代码

    效果图 <el-table :data="gridData" border class="det-div" :span-method="obje ...

  6. elementui table 第一列内容相同 自动合并单元格 el-table第一列内容相同自动合并

    template( :span-method="objectSpanMethod") <!-- 表格 --><el-table:data="tableD ...

  7. java单元格合并多列_ElementUI表格列相同值自动合并单元格( 多列 )

    上篇文章写了如何在处理单列相同数据时让相同的项进行自动合并, 如果有多列合并的需求我们也应该可以从容应对... (产品: 你们看我干嘛?) 废话不多说 上代码 HTML JS var Main = { ...

  8. element ui 第一列相同数据相同合并单元格

    template部分 <el-table :data="tableData" :span-method="objectSpanMethod" border ...

  9. layui table 表头合并_layui 动态表格之合并单元格

    需求: 下面用excel表格大概模拟下需求,左边是原来的,要改成右边这样的: ①第一步:再生成表格后调用此方法,以合并重复的单元格 done : function(res, curr, count) ...

最新文章

  1. 点击图片放大，再点击缩小的代码段
  2. java 核桃的数量,[Java教程]【蓝桥杯】历届试题 核桃的数量
  3. 【iOS篇】从容面对App崩溃
  4. 【Linux】一步一步学Linux——w命令(227)
  5. 查看电脑重启日志_系统日志看硬盘故障图文教程，电脑日志查看磁盘硬盘坏道问题方法...
  6. mysql中数据定义和数据控制语言_MySQL 数据定义语言（DDL）
  7. 2017.6.27 跟开涛学spring3--spring概述
  8. python autoitlibrary_AutoItLibrary
  9. HDU 5971 2016ICPC大连 A: Wrestling Match（二分图判断）
  10. android 安全管理,基于web的Android应用安全管理系统
  11. 海康8700视频监控OCX控件注册（如无法查看监控）
  12. 杭州电子科技大学计算机考研复试分数线,杭州电子科技大学2020年考研复试分数线...
  13. 李佳琦、薇娅们的残酷生存物语
  14. TB6560 驱动板资料
  15. MSE = Bias² + Variance?什么是“好的”统计估计器
  16. 【CF613D】Kingdom and its Cities（虚树，动态规划）
  17. 关于win10打印机设置错误，无法打印的解决办法
  18. MCMC_calibration
  19. 在应用中安装其他应用程序
  20. VMware的虚拟机连不上网

热门文章

  1. docker可用容量 查看_查看docker容器占用内存
  2. java列表mvc分页_Springmvc完成分页的功能
  3. 正态分布的前世今生：误差分布曲线的确立
  4. DSP之有限字长效应
  5. Ajax封装2.0版
  6. 高中信息技术——Flash动画制作刷题点整理(二)
  7. 计算机械效率的公式怎么读,机械效率公式总结
  8. MySQL 主键入门到精通
  9. kafka offset入门理解
  10. 第十八届绵竹年画节开幕 大巡游展示清末年画《迎春图》场景