zoukankan      html  css  js  c++  java
  • 表格列冻结

    代码

    <!DOCTYPE html>
    <html>
    <head>   
        <title>表格的冻结列实现</title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            #tableDiv{
                width:500px;
                overflow:auto;
            }
            table td{
                padding: 6px;
            }
            table{
                border-collapse: collapse;
            }
            table tr td:last-child{
                right: 172px;
            }
    
        </style>    
    </head>
    <body>
        <div id="tableDiv">
            <table>
                <tr>
                    <td>start</td>
                    <td>start1</td>
                    <td>start2</td>
                    <td>start3</td>
                    <td>start4</td>
                    <td>start5</td>
                    <td>start6</td>
                    <td>start7</td>
                    <td>start8</td>
                    <td>endendendendend9</td>
                </tr>
                <p>11111111111</p>
            </table>
        </div>
        <script src="jquery-1.9.1.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function(){            
                $("#tableDiv").scroll(function(){
                    var left=$("#tableDiv").scrollLeft();
                    var trs=$("#tableDiv table tr");
                        $.each(trs,function(i,v){
                            $(v).children().eq(0).css({    
                                "position":"relative",
                                "top":"0px",
                                "left":left,
                                "background-color":"red"
                            });
                            $(v).children().eq(1).css({    
                                "position":"relative",
                                "top":"0px",
                                "left":left,
                                "background-color":"red"
                            });
                                                    
                            
                            $(v).children().eq(9).css({    
                                "position":"relative",
                                "top":"0px",
                                "right":172-parseInt(left)+"px",
                                "background-color":"red"
                            });
                        });        
                });
            });
    
        </script>
    </body>
    </html>   
  • 相关阅读:
    C# vb .net实现淡出效果特效滤镜
    <<薪资至少10K的一道题,你能拿下吗>>练习
    职场生存规则--水
    简单摸拟电梯程序
    回收期计算
    徒手写汉诺塔
    没有方法的算法代码
    听说是阿里笔试题
    工作任务的分解
    纯吐槽,关于现在的一些混乱情况.
  • 原文地址:https://www.cnblogs.com/justSmile2/p/9872770.html
Copyright © 2011-2022 走看看