html首行冻结固定完整实例

最新推荐文章于 2024-04-30 16:59:14 发布

1002710030

最新推荐文章于 2024-04-30 16:59:14 发布

阅读量283

点赞数

文章标签： html 前端 javascript

本文链接：https://blog.csdn.net/qq_35776207/article/details/129065126

版权

<?php
header("Content-type:text/html;charset=utf-8");  
error_reporting(0);
session_start();
include("conn.php");
?>
<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta charset="utf-8">
	<title></title>
	<link rel="stylesheet" href="bootstrap.min.css">
	<script src="jquery.min.js"></script>
	<script src="bootstrap.min.js"></script>
</head>
<style type="text/css">
td{
	text-decoration:none;
}
#tScroll{
	position:fixed;
	top:0;
	display:none;
}
</style>
<body>
	<script>
		$(document).ready(function () {
			var $tmain = $("#tMain");
			var $tScroll = $("#tScroll");
			var pos = $tmain.offset().top + $tmain.find(">thead").height();
			$(document).scroll(function () {
				var dataScroll = $tScroll.data("scroll");
				dataScroll = dataScroll || false;
				if ($(this).scrollTop() >= pos) {
					if (!dataScroll) {
						$tScroll
						.data("scroll", true)
						.show()
						.find("th").each(function () {
							$(this).width($tmain.find(">thead>tr>th").eq($(this).index()).width());
						})
						;
					}
				} else {
					if (dataScroll) {
						$tScroll
						.data("scroll", false)
						.hide()
						;
					}
				}
			});
		});
	</script>

	<table id="tScroll" width="100%" class="table table-bordered" style="background-color:#ffffff">
		<thead>
			<tr>
				<th>项目1</th>
				<th>项目2</th>
				<th>项目3</th>
				
			</tr>
		</thead>
	</table>
	<table width="100%" id="tMain" class="table table-bordered">
		<thead>
			<tr>
				<th>项目1</th>
				<th>项目2</th>
				<th>项目3</th>
			</tr>
		</thead>
		<?php
		$sql="SELECT * from intd order by id desc";
		$xuhao=1;
		$rs=mysql_query($sql);
		while($rows=mysql_fetch_array($rs)){
			?>
			<tr <?php 
			if ($xuhao%2!=0) {
				?>
				class="info"
				<?php } ?>  >
				<td><?php echo $rows["xm1"]?></td>
				<td><?php echo $rows["xm2"]?></td>
				<td><?php echo $rows["xm3"]?></td>
			</tr>
			<?php
			$xuhao++;
		}
		?>
	</table>
</body>
</html>