• Tab表格thead头部固定(demo)


    注:引入 bootstrap.css  和jq

    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8">
            <title>Tab表格thead头部固定</title>
            <link rel="stylesheet" href="style/bootstrap.css" />
            <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
            <script src="./bootstrap.min.js" type="text/javascript"></script>
        </head>
        <style type="text/css">
            #right_div1 {
                width: 700px;
                overflow: hidden;
            }
            
            #right_divx {
                width: 700px;
            }
            
            #right_div2 {
                margin-top: -20.6px;
                width: 703px;
                height: 300px;
                overflow: auto;
            }
            
            #right_table1 {
                width: 700px;
            }
            
            #right_table2 {
                /**width和max-width一起写,手机浏览器打开也能固定长度**/
                width: 700px;
                max-width: 700px;
                white-space: nowrap;
                font-weight: bolder;
            }
            
            #right_table1 th {
                background: #008396;
                text-align: center;
                width: 10%;
                color: white;
            }
            
            #right_table2 td {
                width: 12%;
                text-align: center;
            }
        </style>
    
        <body>
    
            <div class="patientinfo">
                <div class="container-fluid">
                    <div id="right_div">
                        <div id="right_div1">
                            <div id="right_divx">
                                <table id="right_table1" class="table table-bordered">
                                    <tr>
                                        <th>取号码</th>
                                        <th>姓名</th>
                                        <th>科室</th>
                                        <th>医生</th>
                                        <th>数据来源</th>
                                        <th>病例</th>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div id="right_div2">
                            <table id="right_table2" class="table table-bordered">
                                <tr>
                                    <td>1</td>
                                    <td>xingming</td>
                                    <td>骨科</td>
                                    <td>周天</td>
                                    <td>12</td>
                                    <td class="checks">查看</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!--脚本-->
            <script type="text/javascript">
                //固定和滚动
                var right_div2 = document.getElementById("right_div2");
                right_div2.onscroll = function() {
                    var right_div2_top = this.scrollTop;
                    var right_div2_left = this.scrollLeft;
                    document.getElementById("left_div2").scrollTop = right_div2_top;
                    document.getElementById("right_div1").scrollLeft = right_div2_left;
                }
                for(var i = 0; i < 24; i++) {
                    $("#left_table2").append("<tr><th>我是首列</th></tr>");
                    $("#right_table2").append("<tr><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td><td>" + i + "</td></tr>");
                }
            </script>
        </body>
    
    </html>
  • 相关阅读:
    解析Javascript事件冒泡机制(转)
    JavaScript事件处理的三种方式(转)
    javaScript中"=="和"==="运算符的区别
    博客
    基础知识巩固二
    基础知识巩固
    知识小结(浮点数问题)
    关于电脑桌面图标消失并且右键无法点击的情况
    JS随笔(二)
    关于JS学习笔记
  • 原文地址:https://www.cnblogs.com/fanting/p/9981480.html
Copyright © 2020-2023  润新知