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;
        }
        
        
        
         .gridtable {
            width: 100%;
            text-align: center;
        }
        table.gridtable {
            font-family: verdana,arial,sans-serif;
            font-size: 11px;
            color: #333333;
            border-width: 1px;
            border-color: #666666;
            border-collapse: collapse;
        }
        table.gridtable th {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #dedede;
        }
        table.gridtable td {
            border-width: 1px;
            padding: 8px;
            border-style: solid;
            border-color: #666666;
            background-color: #ffffff;
        }
    </style>

</head>

<body>
    <!-- Table goes in the document BODY -->
    <table class="gridtable">
        <thead>
            <tr>
                <th>Info Header 1</th>
                <th>Info Header 2</th>
                <th>Info Header 3</th>
            </tr>
        </thead>
        <tbody>


            <tr>
                <td>Text 1A</td>
                <td>Text 1B</td>
                <td>Text 1C</td>
            </tr>
            <tr>
                <td>Text 2A</td>
                <td>Text 2B</td>
                <td>Text 2C</td>
            </tr>
            <tr>
                <td>Text 2A</td>
                <td>Text 2B</td>
                <td>Text 2C</td>
            </tr>
            <tr>
                <td>Text 2A</td>
                <td>Text 2B</td>
                <td>Text 2C</td>
            </tr>
            <tr>
                <td>Text 2A</td>
                <td>Text 2B</td>
                <td>Text 2C</td>
            </tr>
            <tr>
                <td>Text 2A</td>
                <td>Text 2B</td>
                <td>Text 2C</td>
            </tr>
            <tr>
                <td>Text 1A</td>
                <td>Text 1B</td>
                <td>Text 1C</td>
            </tr>
            <tr>
                <td>Text 2A</td>
                <td>Text 2B</td>
                <td>Text 2C</td>
            </tr>
            <tr>
                <td>Text 2A</td>
                <td>Text 2B</td>
                <td>Text 2C</td>
            </tr>
            <tr>
                &.........完整代码请登录后点击上方下载按钮下载查看