Table表头固定，内容可以滚动

　　对于table表的操作，网上插件有很多，比如说表很长的时候出现滚动条，往下拉滚动条表头能固定，再比如说，我拖拽表头的改变列宽等等，虽然最后我用的是一个网上的插件（这个插件并不好用，迟早我会自己写一个表格的插件），但是我还是想谈一谈表头固定的方法。

　　1.首先需要把表头放在一个table里面，如下tableHead

<table width="100%" border="1" id="tableHead">
	<tr>
	    <td id="td1">编号</td>
	    <td id="td2">姓名</td>
	    <td id="td3">备注</td>
	    <td id="td4">性格</td>
	</tr>
</table>

 2.其次，把表的内容再放到一个table里面，如下tableContent，把这个table放在一个div里面，即divContent，要在css里面设置div的高度，overflow-y:scroll;

<div class="divContent">
				
			<table width="100%" border="1" id="tableContent">
			<tr>
				<td>001</td>
				<td>张三</td>
				<td>喜欢旅游</td>
				<td>很乐观的一个人</td>
			</tr>
                          ......
                        </table>
</div>            

 注意：width最好设置成一样

3.最后，js部分如下

$(document).ready(function(){
				
				var contentTd = $("#tableContent").find("tr").eq(0).find("td");
				$("#tableHead").find("td").each(function(i,n){
					if (i == 3) {
						var contentWidth = $("#tableContent").width();
						var headWidth = $("#tableHead").width();
						var scrollbarWidth = headWidth - contentWidth;
						$(n).width(contentTd.eq(i).width()+scrollbarWidth);
					}
					else {
						$(n).width(contentTd.eq(i).width());
					}					
				});
			});				

 注意：if判断i==3,是因为表格有四列，第四列的时候表头的宽度等于第四列内容的宽度加上滚动条的宽度，上述是用表头表格的宽度减去内容表格的宽度得到。

转载于:https://www.cnblogs.com/redangel/archive/2013/02/27/2935409.html