Tab表格thead头部固定（demo)

Posted 2021-01-21 fanting

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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" />
    </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>

以上是关于Tab表格thead头部固定（demo)的主要内容，如果未能解决你的问题，请参考以下文章

移动端固定头部和固定左边第一列的实现方案（Vue中实现demo）

HTML tbody only 只有一个标题列宽

常见页面布局-头部固定+自定义滚动条

ionic 最简单的路由形式，头部固定，下面tab切换-------一个简单的单页切换起飞了

table 表头固定 thead固定. 1) 使用jquery.freezeheader.js

滚动表格固定表头和左边栏