表格头部和首列固定的实现代码

最新推荐文章于 2023-01-04 11:43:29 发布

小排骨zzz

最新推荐文章于 2023-01-04 11:43:29 发布

阅读量288

点赞数

分类专栏：前端开发文章标签：前端开发表格头部和首列固定表格固定

本文链接：https://blog.csdn.net/ZWH1113/article/details/101778236

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现思路：不采用定位的写法，直接用js控制。通过表格内容的滑动来带动表头和首列一起滑动。所以，可滑动的区域是内容除开第一列的部分。因为采用的js控制，所以，该表格能放在页面中的任何位置，都不会影响滚动。

效果图：

全部代码如下：

<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
		<title>头部和首列固定</title>
		<style>
			/* Reset*/
			body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,menu,input,fieldset,textarea,button,select,th,td,div,span,header,nav,footer{margin:0;padding:0;-webkit-text-size-adjust:none;}
			h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal;font-size:100%;}
			li{list-style:none;}
			em,i{font-style:normal;}
			a,a:visited{border:none;text-decoration:none;}
			fieldset,img,input{border:none;}
			input,textarea{outline:none;resize:none;-webkit-appearance:none;}
			html{/*font-size:62.5%;*/}
			body{word-wrap: break-word;font-size: 12px;font-family:
			/* En*/'-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Ubuntu', 'Helvetica Neue', 'Helvetica', 'Arial',
			/* Cn*/'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei UI', 'Microsoft YaHei', 'Source Han Sans CN', 'sans-serif';line-height: 1.6;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);-webkit-touch-callout: none;-webkit-user-select: none;}
			/* public*/.clear{zoom: 1;}
			/* 主要css */
			.table{position: relative;}
			/* 表头 */
			.table .thead{height:34px;line-height:34px;width:100%;color: #9b9c9c;}
			.table .thead::after{content: "";clear: both;display: block;}
			.table .th_first{width:100px;text-align:center;background:#f7f7f7;float: left;}
			.table .th_list{display: -webkit-flex;display: flex;overflow:hidden;width: calc(100% - 100px);float: left;}
			.table .th_list div{flex-shrink: 0;width:90px;background:#f7f7f7;text-align: center;}
			.table .default{position: relative;}
			.table .default::before{width: 0;height: 0;content: '';border-right: 4px solid transparent;border-left: 4px solid transparent;border-bottom: 3px solid #c7c7c8;position: absolute;top: 3px;left: 2px;}
			.table .default.up::before{border-bottom: 3px solid #f71828;}
			.table .default::after{width: 0;height: 0;content: '';border-right: 4px solid transparent;border-left: 4px solid transparent;border-top: 3px solid #c7c7c8;position: absolute;bottom: 3px;left: 2px;}
			.table .default.down::after{border-top: 3px solid #f71828;}
			/* 表体内容 */
			.table .tbody{width: 100%;}
			.table .td_first{width:100px;text-align:center;float:left;height:200px;overflow:hidden;}
			.table .td_first div{border-bottom: 1px solid #e7e7e7;box-sizing: border-box;height: 50px;padding: 6px 0;}
			.table .td_first div p:first-child{font-size: 16px;color: #495056;font-weight: bold;line-height:20px;}
			.table .td_first div p:last-child{font-size: 14px;color: #6a6a6b;}
			.table .td_list{width:calc(100% - 100px);height:200px;overflow:auto;font-size: 17px;}
			.table .td_list .line{display: -webkit-flex;display: flex;}
			.table .td_list .line div{padding: 10px 0;width:90px;text-align:center;border-bottom: 1px solid #e7e7e7;box-sizing: border-box;height: 50px;flex-shrink: 0;    line-height: 30px;}
			.table .td_list .line .price span{line-height: 14px;display: block;font-size: 14px;}
			/* 颜色 */
			.td_blue{color: #318cf8;font-weight: bold;}
			.td_red{color: #f71828;font-weight: bold;}
		</style>
	</head>
	<body>
		<p>table可放在顶部位置</p>
		<p>table可放在页面的任何位置</p>
		<br>
		<div class="table">
			<div class="thead">
				<div class="th_first">股票名称</div>
				<div class="th_list">
					<!-- up:向上  down:向下 -->
					<div>连板数<span class="default up"></span></div><div>封板时间</div><div>最高/低价</div><div>涨停类型</div><div>几天几板</div><div>最新价</div>
				</div>
			</div>
			<div class="tbody">
				<div class="td_first">
					<div><p>三角洲</p><p>123456</p></div>
					<div><p>十里桃园</p><p>123456</p></div>
					<div><p>证券大咖</p><p>123456</p></div>
					<div><p>证券大咖</p><p>123456</p></div>
					<div><p>证券大咖</p><p>123456</p></div>
					<div><p>证券大咖</p><p>123456</p></div>
				</div>
				<div class="td_list">
					<div class="line"><div class="td_blue">3</div><div>09:25:25</div><div class="price"><span>12345</span><span>123456</span></div><div>换手板</div><div>3天3板</div><div class="td_red">10.28</div></div>
					<div class="line"><div class="td_blue">3</div><div>09:25:25</div><div class="price"><span>12345</span><span>123456</span></div><div>换手板</div><div>3天3板</div><div class="td_red">10.28</div></div>
					<div class="line"><div class="td_blue">3</div><div>09:25:25</div><div class="price"><span>12345</span><span>123456</span></div><div>换手板</div><div>3天3板</div><div class="td_red">10.28</div></div>
					<div class="line"><div class="td_blue">3</div><div>09:25:25</div><div class="price"><span>12345</span><span>123456</span></div><div>换手板</div><div>3天3板</div><div class="td_red">10.28</div></div>
					<div class="line"><div class="td_blue">3</div><div>09:25:25</div><div class="price"><span>12345</span><span>123456</span></div><div>换手板</div><div>3天3板</div><div class="td_red">10.28</div></div>
					<div class="line"><div class="td_blue">3</div><div>09:25:25</div><div class="price"><span>12345</span><span>123456</span></div><div>换手板</div><div>3天3板</div><div class="td_red">10.28</div></div>
				</div>
			</div>
		</div>
		<script>
			window.onload=function(){
				//固定和滚动
				var tdlist =document.getElementsByClassName("td_list")[0];
				tdlist.onscroll = function(){
				    document.getElementsByClassName("td_first")[0].scrollTop = this.scrollTop;
				    document.getElementsByClassName("th_list")[0].scrollLeft = this.scrollLeft;
				}
			}
		</script>
	</body>
</html>

小排骨zzz

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表格头部和首列固定的实现代码

实现思路：不采用定位的写法，直接用js控制。通过表格内容的滑动来带动表头和首列一起滑动。所以，可滑动的区域是内容除开第一列的部分。因为采用的js控制，所以，该表格能放在页面中的任何位置，都不会影响滚动。效果图：全部代码如下：<!DOCTYPE html><html lang="zh-cn"> <head> <meta http-e...
复制链接

扫一扫

专栏目录