Table表头固定，内容可以滚动-创新互联

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

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

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：申请域名、雅安服务器托管、营销软件、网站建设、富蕴网站维护、网站推广。

编号

姓名

备注

性格

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

 注意：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,是因为表格有四列，第四列的时候表头的宽度等于第四列内容的宽度加上滚动条的宽度，上述是用表头表格的宽度减去内容表格的宽度得到。

本文标题：Table表头固定，内容可以滚动-创新互联
链接地址：http://cqcxhl.com/article/ddsjss.html