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>
复制代码

 

posted @   小凢  阅读(641)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
阅读排行：
· C# 13 中的新增功能实操
· Ollama本地部署大模型总结
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（4）
· langchain0.3教程：从0到1打造一个智能聊天机器人
· 2025成都.NET开发者Connect圆满结束
点击右上角即可分享
微信分享提示