jquery.stickyheader实现table表格滚定th头部浮动固定效果代码-html代码-BFW代码库

jquery.stickyheader实现table表格滚定th头部浮动固定效果代码

代码语言：html

所属分类：表格

代码描述：jquery.stickyheader实现table表格滚定th头部浮动固定效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <style type="text/css">
    table{
        text-align: center;
    }
        /* For appearance */
        .sticky-wrap {
                overflow-x: auto;
                overflow-y: hidden;
                position: relative;
                margin: 3em 0;
                width: 100%;
        
        }
        .sticky-wrap .sticky-thead,
        .sticky-wrap .sticky-col,
        .sticky-wrap .sticky-intersect {
             border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
                opacity: 0;
                position: absolute;
                
                top: 0;
                left: 0;
                transition: all .125s ease-in-out;
                z-index: 50;
                width: auto; /* Prevent table from stretching to full size */
        }
                .sticky-wrap .sticky-thead {
                        box-shadow: 0 0.25em 0.1em -0.1em rgba(0,0,0,.125);
                        z-index: 100;
                        width: 100%; /* Force stretch */
                }
                .sticky-wrap .sticky-intersect {
                        opacity: 1;
                        z-index: 150;
        
                }
                        .sticky-wrap .sticky-intersect th {
                                background-color: #666;
                                color: #eee;
                        }
        .sticky-wrap td,
        .sticky-wrap th {
                box-sizing: border-box;
        }
        
        
    .........完整代码请登录后点击上方下载按钮下载查看