Tab表格thead头部固定（demo)

时间：2018-11-19 11:06:39 阅读：601 评论：0 收藏：0 [点我收藏+]

标签：bootstrap ons bootstra auto set rap tin sheet code

注：引入 bootstrap.css 和jq

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title>Tab表格thead头部固定</title>
        <link rel="stylesheet" href="style/bootstrap.css" />
    </head>

    <body>
        <title>固定表头和首列的表格</title>
        <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>
        <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 src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
        <script src="./bootstrap.min.js" type="text/javascript"></script>
        <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>

标签：bootstrap ons bootstra auto set rap tin sheet code

原文地址：https://www.cnblogs.com/fanting/p/9981480.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行