• jQuery控制表头

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
    *{
    padding: 0;
    margin: 0;
    }
    .djs-list-tab {
    100%;
    max- 100%;
    margin-bottom: 20px;
    text-align: center;
    font-size: 12px;
    border-collapse: collapse;
    border-spacing: 0;
    }

    .djs-list-tab a {
    text-decoration: none;
    }

    .djs-list-tab thead tr {
    border: 1px solid #51b0c2;
    }

    .djs-list-tab thead th {
    border-right: 1px solid white;
    }

    .djs-list-tab thead th:last-child {
    border-right: 1px solid #51b0c2;
    }

    .djs-list-tab tbody tr td {
    border: 1px solid #ddd;
    padding-top: 10px;
    padding-bottom: 10px;
    }

    .djs-list-tab tbody tr:nth-child(even) {
    background-color: #f9f9f9;
    }

    .djs-list-tab tbody tr:nth-child(odd) {
    background-color: white;
    }

    .djs-list-tab tbody tr:nth-child(odd):hover {
    cursor: pointer;
    background-color: #f5f5f5;
    }

    .djs-list-tab .bg-blue {
    height: 35px;
    background: #51b0c2;
    color: white;

    }

    </style>
    </head>
    <body style="overflow: hidden">
    <div style="height: 50px; 100%;border: 1px solid red;text-align: center;line-height: 50px">
    <h1>table表头固定测试</h1>
    </div>
    <div class="page-content" style="100%;height:100vh; overflow:scroll;">
    <div id="tabContent" class="tab-content clearfix" style="border:none;" >
    <div id="tab-dashboard-content" class="tab-pane tab-pane-menu active">
    <div>
    <table class="djs-list-tab T-showHighLight">
    <thead>
    <tr class="bg-blue T-tr-fixed">
    <th>导游姓名</th>
    <th>性别</th>
    <th>联系电话</th>
    <th>导游等级</th>
    <th>导游证编号</th>
    <th>导游简介</th>
    <th>启用标志</th>
    <th>操作</th>
    </tr>
    </thead>
    <tbody class="T-guide-list">
    <!-- {{each guideList as guide}} -->
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    <tr>
    <td>张欢</td>
    <td>
    女
    </td>
    <td>18200590723</td>
    <td>
    特级导游资格
    </td>
    <td>D-2541-145875</td>
    <td class="T-ctrl-tip" title="{{guide.remark}}">公司的分公司</span>
    </td>
    <td>
    <i class="ace-icon fa fa-times red bigger-125"></i> 已停用
    </td>
    <td>
    <div class="btn-group">
    <a class="T-action T-view cursor">查看</a>
    <a class="T-action T-edit cursor R-right" data-right="1010003">
    <label class="pad-r-5">|</label>
    编辑
    </a>
    <a class="T-action T-delete cursor R-right" data-right="1010004">
    <label class="pad-r-5">|</label>
    删除
    </a>
    </div>
    </td>
    </tr>
    </tbody>
    </table>
    <div class="row pageMode">
    <div>
    <small>共计 1 条记录</small>
    </div>
    <div>
    <div class="T-pagenation pull-right">
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </body>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
    <script>
    function test(){
    var $tab = $(".page-content");
    $tab.off("scroll").scroll(function(event){
    var $that = $(this),
    $trFixed = $that.find('.T-tr-fixed'),
    $table = $trFixed.closest("table"),
    top = $table.offset().top - $that.offset().top;
    if(top >= 0){
    top = 0;
    }
    $trFixed.css({
    '-webkit-transform': 'translateY('+(-top)+'px)',
    '-moz-transform': 'translateY('+(-top)+'px)',
    '-ms-transform': 'translateY('+(-top)+'px)',
    '-o-transform': 'translateY('+(-top)+'px)',
    'transform': 'translateY('+(-top)+'px)'
    });
    })
    }
    test();
    </script>
    </html>
  • 相关阅读:
    服务器又100%了，上一个挖矿病毒解决完，这几天又来了一个新的挖矿病毒。。。。
    一些面试题
    家庭应急储备物资分类
    所学习的docker
    Mysql主从复制原理及同步延迟问题
    关于git
    小程序的get和post需要注意的地方
    CSS3 3D转换
    transform CSS3 2D知识点汇总
    HTML5基础知识总结(一)
  • 原文地址：https://www.cnblogs.com/ZH1132672711/p/5626069.html
Copyright © 2020-2023  润新知