關於table表格頭部固定和列固定的方式

原創 前进的探索者 2020-06-21 14:19

無論你用什麼框架都要用到table固定列或者表頭的現象。最近用到了，寫個demo以備後面用，順便分享一下，提供給徐亞的人。

下面是代碼：

<!DOCTYPE html>
<html lang="zh">

	<head>
		<meta charset="utf-8">
		<title>表格第一行和前幾列固定</title>
		<meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" type="text/css" href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.css">
		<script src="https://cdn.bootcss.com/jquery/1.11.1-rc1/jquery.js" type="text/javascript"></script>
		<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.js"></script>

		<style type="text/css">
			body {
				background: #eee url('/images/admin/furley_bg.png');
				font-family: helvetica, "Microsoft Yahei", sans-serif;
				color: #333;
				font-size: 12px;
			}
			
			body,
			div,
			dl,
			dt,
			dd,
			ul,
			ol,
			li,
			h1,
			h2,
			h3,
			h4,
			h5,
			h6,
			pre,
			code,
			form,
			fieldset,
			legend,
			input,
			textarea,
			p,
			blockquote,
			th,
			td {
				margin: 0;
				outline: 0 none;
				padding: 0;
			}
			
			ul,
			li {
				list-style: none;
			}
			
			a {
				blr: expression(this.onFocus=this.close());
			}
			/* 只支持IE，過多使用效率低 */
			
			a {
				blr: expression(this.onFocus=this.blur());
			}
			/* 只支持IE，過多使用效率低 */
			
			a:focus {
				-moz-outline-style: none;
			}
			/* IE不支持 */
			
			a:focus {
				outline: none;
			}
			/*很多網站都會加的屬性*/
			
			a:hover {
				text-decoration: none;
			}
			
			hr {
				border-top: 1px solid #ddd;
				border-bottom: 1px solid #fff;
			}
			
			.no-padding {
				padding: 0 !important;
			}
			
			.no-padding-bottom {
				padding-bottom: 0 !important;
			}
			
			.no-padding-top {
				padding-top: 0 !important;
			}
			
			.no-padding-left {
				padding-left: 0 !important;
			}
			
			.no-padding-right {
				padding-right: 0 !important;
			}
			
			.no-margin {
				margin: 0 !important;
			}
			
			.no-margin-bottom {
				margin-bottom: 0 !important;
			}
			
			.no-margin-top {
				margin-top: 0 !important;
			}
			
			.no-margin-left {
				margin-left: 0 !important;
			}
			
			.no-margin-right {
				margin-right: 0 !important;
			}
			
			.no-border {
				border: 0 none;
			}
			
			.no-border-bottom {
				border-bottom: 0 none;
			}
			
			.no-border-top {
				border-top: 0 none;
			}
			
			.no-border-left {
				border-left: medium none;
			}
			
			.no-border-right {
				border-right: 0 none;
			}
			
			.no-underline {
				text-decoration: none !important;
			}
			
			.no-hover-underline:hover {
				text-decoration: none !important;
			}
			
			.no-shadow,
			.no-box-shadow {
				box-shadow: none !important;
			}
			
			.no-text-shadow {
				text-shadow: none !important;
			}
			
			.icon {
				background: url("/images/inons/icon.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
				display: inline-block;
				height: 24px;
				line-height: 24px;
				overflow: hidden;
				text-indent: -9999px;
				vertical-align: middle;
				width: 24px;
			}
			
			.export {
				background-position: 0 -72px;
				cursor: pointer;
			}
			
			.icon-lt {
				background-position: 0 -1009px;
			}
			
			.icon-close {
				background-position: 0 -793px;
			}
			/*Navbar*/
			
			.navbar {
				position: relative;
				z-index: 20;
				margin-bottom: 0;
				box-shadow: 0px 0px 3px #ccc;
				-webkit-box-shadow: 0px 0px 3px #ccc;
				-moz-box-shadow: 0px 0px 3px #ccc;
			}
			
			.navbar .brand {
				text-shadow: none;
			}
			
			.navbar .navbar-inner {
				background: #4d5b76;
				background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #4d5b76), color-stop(1, #6c7a95));
				background: -ms-linear-gradient(bottom, #4d5b76, #6c7a95);
				background: -moz-linear-gradient(center bottom, #4d5b76 0%, #6c7a95 100%);
				background: -o-linear-gradient(bottom, #4d5b76, #6c7a95);
				filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#6c7a95',EndColorStr='#4d5b76')";
				padding: 0em 1em;
				margin: 0px;
				-webkit-border-radius: 0px;
				-moz-border-radius: 0px;
				border-radius: 0px;
				-moz-background-clip: padding;
				-webkit-background-clip: padding-box;
				background-clip: padding-box;
				border: 0px;
				border-bottom: none;
			}
			
			.navbar .nav {
				margin: 0em;
				margin-right: -1em;
			}
			
			.navbar .nav>li>a {
				color: #fff;
				text-shadow: none;
			}
			
			.navbar .nav>li:hover {
				sbackground-color: #444;
			}
			
			.navbar .nav>li>a:hover {
				color: #fff;
			}
			
			.navbar .dropdown-menu a:hover {
				background: none;
				color: #000;
			}
			
			.navbar .nav li.dropdown.open>.dropdown-toggle {
				background-color: #444;
				color: #fff;
			}
			/** content **/
			
			.content {
				min-width: 400px;
				position: relative;
				min-height: 600px;
				background: #fff;
				border-left: none;
				padding-top: 35px;
			}
			
			.header {
				background: #ffffff;
				background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #e6e6e6), color-stop(1, #ffffff));
				background: -ms-linear-gradient(bottom, #e6e6e6, #ffffff);
				background: -moz-linear-gradient(center bottom, #e6e6e6 0%, #ffffff 100%);
				background: -o-linear-gradient(bottom, #e6e6e6, #ffffff);
				filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff',EndColorStr='#e6e6e6')";
				border-bottom: 1px solid #cccccc;
				border-top: 1px solid #ffffff;
				border-left: 1px solid #ffffff;
				padding: 0em 15px;
			}
			
			.breadcrumb {
				-webkit-box-shadow: none;
				-moz-box-shadow: none;
				box-shadow: none;
				-webkit-border-radius: 0px;
				-moz-border-radius: 0px;
				border-radius: 0px;
				-moz-background-clip: padding;
				-webkit-background-clip: padding-box;
				background-clip: padding-box;
				background: #eee;
				border-bottom: 1px solid #aaa;
				border-top: 1px solid #fafafa;
				border-left: 1px solid #fff;
				margin-bottom: .5em;
				width: 100%;
				position: fixed;
				top: 0;
				margin-bottom: 50px;
			}
			
			.container-fluid {
				margin-top: 15px;
			}
			
			.page-content {
				padding: 1em;
			}
			
			a.block-heading:hover,
			.block-heading a:hover,
			a.block-heading-nofloat:hover,
			.block-heading-nofloat a:hover {
				background: #dddddd;
				background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #dddddd), color-stop(1, #fdfdfd));
				background: -ms-linear-gradient(bottom, #dddddd, #fdfdfd);
				background: -moz-linear-gradient(center bottom, #dddddd 0%, #fdfdfd 100%);
				background: -o-linear-gradient(bottom, #dddddd, #fdfdfd);
				filter: progid:dximagetransform.microsoft.gradient(startColorStr='#4d5b76', EndColorStr='#6c7a95');
				-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#fdfdfd',EndColorStr='#dddddd')";
				color: #505050;
			}
			/*Tabs*/
			
			.nav-tabs>li {
				margin-left: .5em;
			}
			
			table.table.list tr:first-child td {
				border-top: 0px;
			}
			/* Tweaks for mobile */
			
			@media (max-width: 641px) {
				.content {
					margin: 0em;
				}
				.sidebar-nav {
					float: none;
					width: auto;
					position: relative;
				}
				h1 {
					text-align: center;
				}
				.stats {
					text-align: center;
					margin-top: 1em;
				}
				.stats .stat {
					float: none;
					display: inline;
				}
				.stat-widget-container .stat-widget {
					font-size: .5em;
				}
			}
			
			@media (max-width: 900px) {
				body.http-error {
					font-size: .75em;
				}
				body.http-error .error-message {
					padding: 0em 1em;
				}
			}
			
			@media (max-width: 851px) {
				.stat-widget-container .stat-widget {
					font-size: .75em;
				}
			}
			
			@media (max-width: 767px) {
				footer hr {
					margin-left: 0em;
					margin-right: 0em;
				}
			}
			
			@media (max-width: 604px) {
				body.http-error {
					font-size: .5em;
				}
			}
			
			th,
			td,
			.table-bordered {
				border-radius: 0 !important;
				text-align: left;
			}
			
			.table thead tr {
				background: linear-gradient(to bottom, #F8F8F8 0px, #ECECEC 100%) repeat-x scroll 0 0 #F2F2F2;
				color: #707070;
				font-weight: normal;
			}
			
			.table thead tr th {
				border-color: #DDDDDD;
				font-weight: bold;
			}
			
			.table thead tr th [class*="icon-"]:first-child {
				margin-right: 2px;
			}
			
			.table thead tr th:first-child {
				border-left-color: #F1F1F1;
			}
			
			.table.table-bordered thead tr th {
				vertical-align: middle;
			}
			
			.table.table-bordered thead tr th:first-child {
				border-left-color: #DDDDDD;
			}
			
			th.center,
			td.center {
				text-align: center;
			}
			
			th .lbl,
			td .lbl {
				margin-bottom: 0;
			}
			
			th .lbl:only-child,
			td .lbl:only-child {
				vertical-align: top;
			}
			
			.table-header {
				background-color: #307ECC;
				color: #FFFFFF;
				font-size: 14px;
				line-height: 38px;
				margin-bottom: 1px;
				padding-left: 12px;
			}
			
			.table-header .close {
				margin-right: 8px;
				margin-top: 0;
				opacity: 0.45;
			}
			
			.table-header .close:hover {
				opacity: 0.75;
			}
			
			.table .num,
			.block-table .num {
				font-size: 14px;
			}
			
			.table .rate,
			.block-table .rate {
				color: red;
				padding-left: 15px;
			}
			
			.table tr.sum {
				background-color: #E0E7F2;
			}
			/** 魔術表格 **/
			
			.magic-table-top,
			.magic-table-left {
				display: none;
				background: #e1e1e1;
			}
			
			.magic-table-top td,
			.magic-table-left td {
				border: 1px solid #ccc;
			}
			/*特殊顏色*/
			
			.cRed,
			.cRed a {
				color: red;
			}
			
			.cGreen,
			.cGreen a {
				color: green;
			}
			
			.cBlue,
			.cBlue a {
				color: blue;
			}
		</style>

	</head>

	<body>
		<div class="row-fluid row-data" style="margin-left: 0px; width: 2100px;">
			<table id="J_MagicTableTop" class="table table-striped table-bordered table-hover" style="display:none;"></table>
			<table id="J_MagicTable" class="table table-striped table-bordered table-hover">
				<thead>
					<tr>
						<th style="width:100px;">日期</th>
						<th style="width:139px;">QQQ</th>
						<th style="width:60px;">第三</th>
						<th style="width:65px;">
							<a href="#">第四</a>
						</th>
						<th style="width:55px;" title="當日點擊用戶（去重）/當日活躍用戶">第五</th>
						<th style="width:55px;" title="點擊總數/當日活躍用戶">第六</th>
						<th style="width:55px;">第七</th>
						<th style="width:40px;">第八</th>
						<th style="width:85px;">第九</th>
						<th style="width:50px;">第十</th>
						<th style="width:40px;">第十一</th>
						<th style="width:80px;">第十二</th>
						<th style="width:80px;">第十三</th>
						<th style="width:80px;">第十四</th>
						<th style="width:80px;">第十五</th>
						<th style="width:80px;">第十六</th>
						<th style="width:80px;">第十七</th>
						<th style="width:80px;">第十八</th>
						<th style="width:90px;">第十九</th>
						<th style="width:90px;">第二十</th>
						<th style="width:90px;">第二十一</th>
						<th style="width:70px;">第二十二</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>2011-01-01</td>
						<td>65757657</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>楷艱用</td>
						<td>夢</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2011-12-31</td>
						<td>8797898980</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>24354456</td>
						<td>7897565656654</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>爲什麼會這樣子呢電視劇啊肯定會及擴散大數據庫大家撒大叔控登記卡薩記得啊數據庫大叔控打卡上打卡上大家看阿斯達克殺菌燈刷卡大家撒打卡上啊就獨守空房過段時間附近的思考和房價開始放大鏡看回復發到手機卡復活</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2061-11-31</td>
						<td>ddffgdgdfgfd</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>24354456</td>
						<td>7897565656654</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2019-11-31</td>
						<td>dxcghfhyuyt222</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>24354456</td>
						<td>7897565656654</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2011-11-31</td>
						<td>467867thgjhmmhm</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>24354456</td>
						<td>7897565656654</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2011-11-31</td>
						<td>467867thgjhmmhm</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>24354456</td>
						<td>7897565656654</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2011-11-31</td>
						<td>dxcghfhyuyt222</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>24354456</td>
						<td>7897565656654</td>
						<td>23432432%</td>
						<td style="color:red">電話費等接口是否和大家可舒服的健身房和大家上飛機對雙方都技術開發火炬大廈發動機上房頂上</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2011-11-31</td>
						<td>65757657</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>楷艱用</td>
						<td>夢</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2011-12-31</td>
						<td>8797898980</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>24354456</td>
						<td>7897565656654</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2061-11-31</td>
						<td>ddffgdgdfgfd</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>24354456</td>
						<td>7897565656654</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2019-11-31</td>
						<td>dxcghfhyuyt222</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>24354456</td>
						<td>7897565656654</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2011-11-31</td>
						<td>467867thgjhmmhm</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>24354456</td>
						<td>7897565656654</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2011-11-31</td>
						<td>467867thgjhmmhm</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>24354456</td>
						<td>7897565656654</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2011-11-31</td>
						<td>dxcghfhyuyt222</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>24354456</td>
						<td>7897565656654</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2011-11-31</td>
						<td>65757657</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>楷艱用</td>
						<td>夢</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
					<tr>
						<td>2011-12-31</td>
						<td>8797898980</td>
						<td>fdsffdg</td>
						<td>
							<a href="#" title="點擊查看平均單次使用時長明細" data-toggle="modal" data-target="#J_LaunchDurationModal" data-backdrop="false" data-keyboard="false">23333</a>
						</td>
						<td>111</td>
						<td>
							<a target="_blank" href="#">545645</a>
						</td>
						<td>555</td>
						<td>333</td>
						<td class="cRed">
							<a target="_blank" href="#">444%</a>
						</td>
						<td class="cRed">
							<a target="_blank" href="#">2343535%</a>
						</td>
						<td>24354456</td>
						<td>7897565656654</td>
						<td>23432432%</td>
						<td style="color:red">2342432234545</td>
						<td>6787687686</td>
						<td>232222</td>
						<td>453546786</td>
						<td>4353535%</td>
						<td>567686%</td>
						<td>789798%</td>
						<td>456546456%</td>
						<td>7898790%</td>
					</tr>
				</tbody>
			</table>
			<table id="J_MagicTableLeft" class="table magic-table-left table-striped table-bordered table-hover" style="display:none;"></table>
		</div>
	</body>

</html>
<script>
	$(function() {
		//表格固定頭部
		if($("#J_MagicTable").length > 0) {
			var blockHeadingHeight = $("#J_BlockHeading").outerHeight();
			$('#J_MagicTable').magicTable({
				thfix: blockHeadingHeight,
				leftIndex: 3,
				leftFlg: true
			}); //leftIndex:3;左邊固定四列
		}
	});

	(function($) {
		$.fn.magicTable = function(option) {
			$.fn.magicTable.option = {
				/* 浮動頭部 */
				'magicTop': $('#J_MagicTableTop'),
				'magicLeft': $('#J_MagicTableLeft'),
				/* 可能有隱藏的，所以設定浮動頭部的開始索引 */
				'leftIndex': 0,
				'leftFlg': false,
				/* 高度調整 */
				"thfix": 0,
				"thWidth": 0, //左邊顯示的寬度
				"thHeight": 0,
				"thTop": 0,
				"thLeft": 0,
				"thLine": 0,
				"removeTotal": false,
			};
			var option = $.extend({}, $.fn.magicTable.option, option);

			return this.each(function() {
				$(this).css({
					'z-index': '9',
					'display': '',
					'position': 'relative'
				});

				/*複製活動的表格內容*/
				var leftHtml = '';
				var leftHtml2 = '';
				var leftFlg = option.leftFlg;
				var thWidth = option.thWidth;
				var thHeight = 0; //th的高度
				var thTop = option.thTop; //th距離瀏覽器頂部的top高度
				var thLeft = option.thLeft; //左側未滾動時的left
				var removeTotal = option.removeTotal; //除去最後一行的彙總
				var flagLeftLength = 0; //左側顯示浮動層時的臨界點

				//處理浮動的頭部
				var topThHtml = '';
				var thLenght = $(this).find('>thead>tr>th').length;
				$(this).find('>thead>tr').each(function() {
					var tmpTopHtml = '';
					var thTmp = '';
					for(var m = 0; m < thLenght; m++) {
						tmpTopHtml += '<th style="height:' + $(this).find('th:eq(' + m + ')').outerHeight(true) + 'px;width:' + $(this).find('th:eq(' + m + ')').outerWidth() + 'px">' + $(this).find('th:eq(' + m + ')').html() + '</th>';
					}
					topThHtml = '<thead><tr>' + tmpTopHtml + '</tr></thead>';
				})
				option.magicTop.html(topThHtml).css({
					'width': $(this).outerWidth(true)
				});;

				var trLenght = $(this).find('>tbody>tr').length;
				if(removeTotal) {
					trLenght -= 1;
				}
				$(this).find('tr').each(function(i, item) {
					if(i == option.thLine) {
						thTop = thTop > 0 ? thTop : $(this).find('th:first').offset().top;
						thHeight = $(this).height(); //包圍th的tr的高度
						thLeft = $(this).offset().left; //表格左側是的left
						flagLeftLength = $(this).find('th:eq(' + option.leftIndex + ')').offset().left;
						thWidth = flagLeftLength + $(this).find('th:eq(' + option.leftIndex + ')').outerWidth() - thLeft;
					} else if(i > option.thLine) {
						if(leftFlg && (i <= trLenght)) {
							var tmpHtml = '';
							for(var j = 0; j <= option.leftIndex; j++) {
								tmpHtml += '<td style="height:' + $(this).find('td:eq(' + j + ')').outerHeight(true) + 'px;width:' +
									$(this).find('td:eq(' + j + ')').innerWidth() + 'px">' + $(this).find('td:eq(' + j + ')').html() + '</td>';
							}
							leftHtml2 += '<tr>' + tmpHtml + '</tr>';
						}
						leftHtml = leftHtml + '<tr><td style="height:' + $(this).find('td:eq(' + option.leftIndex + ')').outerHeight(true) + 'px">' +
							$(this).find('td:eq(' + option.leftIndex + ')').html() + '</td><tr>';
					}
				});

				if(leftFlg) {
					leftHtml = leftHtml2;
					option.magicLeft.html(leftHtml);
				}

				/*活動模塊*/
				function moveSquare() {
					if($(this).scrollTop() >= thTop) {
						option.magicTop.show().css({
							'z-index': '999',
							'position': 'absolute',
							'top': $(this).scrollTop() + option.thfix + 'px'
						});
					} else {
						option.magicTop.css({
							'display': 'none'
						});
					}

					if($(this).scrollLeft() >= thLeft + 1) {
						option.magicLeft.show().css({
							'z-index': '99',
							'position': 'absolute',
							'top': thTop + thHeight + 'px',
							'left': $(this).scrollLeft() + 'px',
							'width': thWidth + 'px',
						});
						if($(this).scrollTop() >= thTop) {
							option.magicLeft.show().css({
								'top': thTop + thHeight - option.thfix + 'px',
							});
						}
					} else {
						option.magicLeft.css({
							'display': 'none'
						});
					}
				}

				if(document.all) {
					window.attachEvent("onscroll", moveSquare);
				} else {
					window.addEventListener('scroll', moveSquare, false);
				}

			});
		};

		$.fn.magicTable.setDefaults = function(settings) {
			$.extend($.fn.magicTable.option, settings);
		};
	})(jQuery);
</script>

</html>

 

用到請自取。

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Facebook 如何做大規模服務的自主測試

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

Paul Marinescu 2021-12-21 10:54:01

微軟終於被罵夠了？迴歸一鍵更改默認瀏覽器

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

闫园园 2021-12-07 11:58:59

使用HTML+CSS製作逼真的紅色開關

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

海拥(haiyong.site) 2021-12-04 14:03:52

JetBrains 發佈輕量級編輯器 Fleet

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-11-30 14:53:56

HTTP客戶端演進之路

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

尼先 2021-11-24 17:43:59

TypeScript 4.5 發佈，帶來 Promise 功能改進

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

辛晓亮 2021-11-19 11:23:57

手把手帶你玩轉 JS | 引航計劃｜大前端

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

三掌柜 2021-11-18 09:28:56

Flutter性能監控實踐

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":1},"content":[{"type":"text","text":"前言","attrs

贝壳大前端技术团队 2021-11-13 13:33:50

花7.5億都做不好的項目，被三位程序員爸爸重寫並開源了

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"blockq

Tina 2021-11-11 09:23:48

ShowMeBug 中如何科學的識別用戶瀏覽器？

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

ShowMeBug 2021-11-10 17:33:55

架構師（2021年11月）

卷首語：二十年老程序員的五條心得 作者：Justin Etheredge 1. 我懂的並不多 “你怎麼會不知道什麼是 BGP？”“你難道沒聽說過 Rust？” 類似的問題可能每天都會出現在我們面前。沒錯，投身於軟件行業的很多人之所以熱愛這份

InfoQ 中文站 2021-11-08 08:03:53

託管頁前端異常監控與治理實戰

{"type":"doc","content":[{"type":"blockquote","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null

百度Geek说 2021-11-05 15:03:57

網易雲信陳功：體驗共享和無限融合是雲通信未來的進化方向丨QCon

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null},"content":[{"typ

张俊宝 2021-11-03 19:03:56

微軟產品經理：你不能不知道的6個Web開發者工具

{"type":"doc","content":[{"type":"paragraph","attrs":{"indent":0,"number":0,"align":null,"origin":null}},{"type":"paragr

Christian Heilmann 2021-11-03 16:08:56

貝殼Flutter瘦身實踐

{"type":"doc","content":[{"type":"heading","attrs":{"align":null,"level":2},"content":[{"type":"text","text":"背景","attrs

贝壳大前端技术团队 2021-11-03 10:33:58