1.表格固定头部，纵向滚动tbody
实现思路：表格的thead和tbody分离，thead和tbody分别使用div进行包裹。
// 头部 <div class="curOrganStaffTableWarpHead" style="476px;"> <table class="conglomerate-table" style=" 100%; margin: 0 auto; border-collapse: collapse;" cellspacing="0" cellpadding="0";table-layout:fixed;> <thead> <tr style="border: none;"> <td>管理职级</td> <td>人数</td> <td>占比</td> </tr> </thead> </table> </div> // tbody部分 <div class="curOrganStaffTableWarp"> <table class="conglomerate-table" style=" 100%; margin: 0 auto; border-collapse: collapse;" cellspacing="0" cellpadding="0"> <tbody> <% var sum = _.sumBy(data, 'ManagerCount') %> <% _.forEach(data, function(item) { %> <tr> <td><%= item.ManageGradeName %></td> <td style="color: #2a8fe9;cursor:pointer;" detaillayer clicktype="1" id="<%= item.Id ? item.Id : '' %>"><%= item.ManagerCount %></td> <td><%= item.Ratio? (item.Ratio * 100 ).toFixed(2) + '%':'-' %></td> </tr> <% }) %> </tbody> </table> </div> //出现滚动条，表头宽度减小10px，和内容部分对齐 var warp = document.getElementsByClassName('curOrganStaffTableWarp'); var warpHead = document.getElementsByClassName('curOrganStaffTableWarpHead'); for (var i = 0; i < warp.length; i++) { if (warp[i].clientHeight < warp[i].scrollHeight) { $(warpHead[i]).css({ "width": "476px" }); } }
2.表格横向滚动，固定第一列，表头和tbody都需要固定
实现思路，获取所有tr的第一个td，设置relative定位，脱离标准流，设置定位。
<html>
<head>
<title>表格的冻结列实现</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
</head>
<body>
<!--如果冻结列不好使，给tableDiv也设置一个position:relative;-->
<div id="tableDiv" style="500px;overflow-x:auto;">
<table style="720px;">
<tr>
<td style="100px;">迭代名称</td>
<td style="80px;">得分</td>
<td style="100px;">代码覆盖率</td>
<td style="120px;">新需求个数</td>
<td style="160px;">通过的需求个数</td>
<td style="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>