zoukankan      html  css  js  c++  java
  • 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,是因为表格有四列,第四列的时候表头的宽度等于第四列内容的宽度加上滚动条的宽度,上述是用表头表格的宽度减去内容表格的宽度得到。

  • 相关阅读:
    [ECNU 1624] 求交集多边形面积
    [转] Java之ACM速成
    [swustoj 191] 迷宫逃离
    [Swustoj 24] Max Area
    PICK定理模板
    [HDU 1007] Quoit Design
    [转] 最近点对距离问题
    [POJ 2184] Cow Exhibition
    SGU 144.Meeting
    SGU 143.Long Live the Queen(女王万岁)
  • 原文地址:https://www.cnblogs.com/redangel/p/2935409.html
Copyright © 2011-2022 走看看