html table 固定表头和列

最新推荐文章于 2024-08-13 17:19:23 发布
最新推荐文章于 2024-08-13 17:19:23 发布
阅读量10w+ 收藏 8
点赞数 2
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35606400/article/details/100021667
版权 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表头和第一列固定</title>
	<style>
		*{
			padding: 0;
			margin: 0;
		}
		html,body{
			width: 100%;
			height: 100%;
		}
		.wrap{
			width: 100%;
			position: relative;
		}
		.box{
			width: 100%;
			overflow-x: auto;
		}
		.table{
			padding-top: 36px;
		}
		.table>thead{
			width: 100%;
			position: fixed;
			overflow: hidden;
			top: 0;
			left: 0;
			background-color: #fff;
			z-index: 98;
		}
		th,td{
			min-width: 85px;
			text-align: center;
			line-height: 36px;
		}
		.table>tbody tr>td:nth-of-type(2){
			padding-left: 85px;
		}
		.table>tbody tr>td:first-child{
			position: absolute;
			left: 0;
			background-color: #fff;
			z-index: 97;
		}
		.first_trh th:first-child{
		    position: fixed;
		    left: 0;
		    top: 0;
		    background-color: #fff;
		    z-index: 99;
		}
		.first_trh th:nth-of-type(2){
			padding-left: 85px;
		}	
	</style>
</head>
<body>
<div class="wrap">
	<div class="box">
		<table class="table">
			<thead>
				<tr class="first_trh">
					<th>行号头</th>
					<th>TH002</th>
					<th>TH003</th>
					<th>TH004</th>
					<th>TH005</th>
					<th>TH006</th>
					<th>TH007</th>
					<th>TH008</th>
					<th>TH009</th>
					<th>TH010</th>
					<th>TH011</th>
					<th>TH012</th>
					<th>TH013</th>
					<th>TH014</th>
					<th>TH015</th>
					<th>TH016</th>
					<th>TH017</th>
					<th>TH018</th>
					<th>TH019</th>
					<th>TH020</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>行号01</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号02</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号03</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号04</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号05</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号06</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号07</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号08</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号09</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号10</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号11</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号12</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号13</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号14</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号15</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号16</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号17</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号18</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号19</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号20</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号21</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号22</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号23</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号24</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号25</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号26</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号27</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号28</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号29</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号30</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号31</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号32</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号33</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号34</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号35</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号36</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号37</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号38</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号39</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号40</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号41</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号42</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号43</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号44</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号45</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号46</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号47</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号48</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号49</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
				<tr>
					<td>行号50</td>
					<td>con001</td>
					<td>con002</td>
					<td>con003</td>
					<td>con004</td>
					<td>con005</td>
					<td>con006</td>
					<td>con007</td>
					<td>con008</td>
					<td>con009</td>
					<td>con010</td>
					<td>con011</td>
					<td>con012</td>
					<td>con013</td>
					<td>con014</td>
					<td>con015</td>
					<td>con016</td>
					<td>con017</td>
					<td>con018</td>
					<td>con019</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script type="text/javascript">

$(window).resize(function () { //当浏览器大小变化时
	$('.table thead').width($('.box').width());
	$('.first_trh').width($('.table').width());
});
$('.box').on('scroll',function(){
	// 将thead头部和外部容器滚动条绑定，同步移动
	$('.table thead').scrollLeft($(this).scrollLeft());
});
/*
*  按下拖拽
*  ele 元素选择器 #id,.class
 */
function sl_dragmove(ele){
	$(document).on('mousedown',ele,function(e_wrap){
        var _that = $(this);
        $(_that).css('cursor','move').css('user-select','none');
        $(this).mouseleave(function(e_c1){
            $(_that).unbind('mousemove');
            $(_that).css('cursor','default');
        });
        $(this).mouseup(function(e_c2){
            $(_that).unbind('mousemove');
            $(_that).css('cursor','default');
        });
        var original_left = $(_that).scrollLeft()+e_wrap.clientX;
        $(this).mousemove(function(e_c3){
            $(_that).scrollLeft(original_left-e_c3.clientX);
        });
    })
}
sl_dragmove('.box');
    
</script>
</body>
</html>
slongzhang_
关注
专栏目录
JS+CSS - table 表格固定表头和第一列、内容可滚动 （转载）
weixin_30819085的博客
09-30 1477
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <meta charset="utf-...
table固定首行首列css 最简单方法（亲测可用）
weixin_49798182的博客
05-30 5026
业务需要前端使用html 写了个table 如图： 需要滚动条上下左右滑动，但是固定首航首列关键代码：/* 首列固定 */left: 0;z-index: 1;/* 表头固定 */top: 0;z-index: 2;/* 表头首列强制最顶层 */z-index: 3;解析：关键属性 css :在 视口滚动到元素 top 距离小于 0px 之前，元素为相对定位。之后，元素将固定在与顶部距离 0px 的位置，直到视口回滚到阈值以下；同理。
在HTML中固定表格表头的简单方法
最新发布
yivifu的专栏
08-13 726
表文介绍了一种不使用JavaScrip也不用第三方插件简单实现在HTML页面中固定表头滚动表格的效果。
HTML页面table表格固定行和列
01-04
当表格的内容很多，表格很长、很高的时候，为了查阅方便，常常要有固定表的表头和左侧侧栏的需求。
html固定表头和列
zzs_123的博客
09-28 1915
效果就是上图 表头是固定的， 跟随滑动轴动，左边第一列也是可以跟谁滑动轴滚动 下面是代码原文是查看 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&amp
HTML table固定表头
dgjvlz1669的博客
07-26 243
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬..... 1.thead和tbody的display设置为block; 这种可以实现,但是需要提前设置好每个th和td的宽度,否则th和对应的td会错开,无法对齐; 2.用两个table模拟,第一个作为thead,第二个作为tbody; 需要动态设置单元格宽度,基本上满足需求,但是在firefox中,...
asp.net html+table固定表头和左侧列.rar
08-20
在这个“asp.net html+table固定表头和左侧列.rar”压缩包中，我们聚焦的是如何在HTML表格（Table）中实现固定表头（Fixed Header）和左侧列（Fixed Left Column）的功能，以便在用户滚动页面时，这些关键信息始终...
移动端table固定表头与固定第一列
02-20
总结起来，实现移动端table的固定表头与固定第一列，主要涉及HTML5的表格结构、CSS的定位和层叠上下文以及可能的JavaScript滚动事件处理。通过这些技术，我们能够在移动端提供更好的数据浏览体验。
bootstrap-table实现表头固定以及列固定的方法示例
10-17
这样即使用户滚动页面查看表格内容时，固定的表头或列依然可见，方便用户快速识别数据所在的列和行。 首先，要使用bootstrap-table实现表头固定以及列固定的功能，需要引入对应的JavaScript和CSS文件。这包括jQuery...
分享一个首行表头和最左列和最右列固定中间滚动的html table样式
12-22
一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列和最右列固定中间滚动的html table样式。 一个首行表头、最左列...
html的table滚动时固定首行和首列
11-26
html的table滚动时固定首行和首例，网上多为3个table拼合实现，现使用一个table实现
实现Table表头和列固定
08-01
实现表头和列固定，并可行多表头，多列(左右都可以)，无错位
table表格固定行和列
05-11
table表格固定行和列。。。。。。。。。。。。。。。。。。。。。。。。。。。。
基于jquery的固定html table表头/列头插件 （加强版）
10-06
基于jquery的固定html table表头/列头插件jquery.fixedtable.js; 兼容主流浏览器，亲测（IE6,IE6+,firefox,chrome,opera）。第一版仅支持所固定列数自定义，本加强版新增所固定行数自定义。
[HTML]TABLE固定表头和行头
热门推荐
王德封-逐浪
07-31 1万+
 TABLE固定表头和行头  html xmlns="http://www.w3.org/1999/xhtml">head>meta http-equiv="Content-Type" content="text/html; charset=gb2312" />title>无标题文档title>style>    body{font-size:12px;
table表身滑动，表头不动样式
qq_36939013的博客
09-27 1062
.toolTipx{ display: flex; flex-direction: column; background: #fff; color: #6c6c6c; max-height: 300px; width: 300px; .head-box { width: 300px; padding-right: 5px; background: #dee0ee; } .toolTip-title { color: #32c5ff;
HTML table表头固定
普罗旺斯
09-27 1440
【代码】HTML table表头固定。
jQuery实现固定表头和列头的代码示例
接着，函数会创建一系列新的div元素，包括`TableID_tableFix`、`TableID_tableHead`、`TableID_tableColumn`和`TableID_tableData`，这些div将用于存放固定表头、固定列头、可滚动的列和数据部分。 接下来，函数会...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值