Table表头固定,内容可以滚动-创新互联
对于table表的操作,网上插件有很多,比如说表很长的时候出现滚动条,往下拉滚动条表头能固定,再比如说,我拖拽表头的改变列宽等等,虽然最后我用的是一个网上的插件(这个插件并不好用,迟早我会自己写一个表格的插件),但是我还是想谈一谈表头固定的方法。![Table表头固定,内容可以滚动
Table表头固定,内容可以滚动](/upload/otherpic41/2166516.jpg)
当前文章:Table表头固定,内容可以滚动-创新互联
转载源于:http://pcwzsj.com/article/ddsjss.html
![Table表头固定,内容可以滚动
Table表头固定,内容可以滚动](/upload/otherpic41/2166516.jpg)
1.首先需要把表头放在一个table里面,如下tableHead
编号 | 姓名 | 备注 | 性格 |
2.其次,把表的内容再放到一个table里面,如下tableContent,把这个table放在一个div里面,即divContent,要在css里面设置div的高度,overflow-y:scroll;
001 | 张三 | 喜欢旅游 | 很乐观的一个人 |
注意: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://pcwzsj.com/article/ddsjss.html