本文介绍: 纯css实现移动表格标题行始终悬浮顶部,类似excel的”首行冻结“效果,并确保苹果安卓系统都能正常显示

移动端不用插件或者UI库的情况下,对原生写的table,想要实现首行标题行在滚动的时候保持冻结状态(即数据较多时能够吸顶),首先大家想到的是position:fixed属性,但是在表格布局下,你需要调整标题内容区域宽度以及列对齐问题如何简便实现大家会很自然的想到表格的tablelayout属性,这个不常用,起初基本实现如下

<style>
   table {width:100%; table-layout: fixed;}
   table thead {position:sticky; top:-1px;} /*或者table th {position:sticky; top:-1px;}*/
</style>
<table border="1" cellspacing="0" bordercolor="#ccc" cellpadding="0">
			<thead>
				<tr align="center">
					<th width="80">操作类型</th>
					<th width="130">操作时间</th>
					<th>状态</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<tr align="center">
					<td>问卷调查</td>
					<td>2023-02-26 10:44:13</td>
					<td>已完成</td>
					<td><span class="blueColor">反馈</span></td>
				</tr>
				<tr align="center">
					<td>问卷调查</td>
					<td>2023-02-26 10:44:13</td>
					<td>已完成</td>
					<td><span class="blueColor">反馈</span></td>
				</tr>
				<tr align="center">
					<td>问卷调查</td>
					<td>2023-02-26 10:44:13</td>
					<td>已完成</td>
					<td><span class="blueColor">反馈</span></td>
				</tr>
				<tr align="center">
					<td>问卷调查</td>
					<td>2023-02-26 10:44:13</td>
					<td>已完成</td>
					<td><span class="blueColor">反馈</span></td>
				</tr>
				<tr align="center">
					<td>问卷调查</td>
					<td>2023-02-26 10:44:13</td>
					<td>已完成</td>
					<td><span class="blueColor">反馈</span></td>
				</tr>
				<tr align="center">
					<td>问卷调查</td>
					<td>2023-02-26 10:44:13</td>
					<td>已完成</td>
					<td><span class="blueColor">反馈</span></td>
				</tr>
			</tbody>
		</table>

效果图

但是,你会发现IOS是正常的,表格数据多出现滚动时,当滑动页面时,表头自动吸顶了,但Android无效,还需改进:

<style scoped>
table {width:100%; table-layout: fixed; font-size: 12px;}
table thead {position:sticky; top:-1px;line-height:50px; font-size: 14px; font-weight: bold;background:#f2f3f5; }
table thead,table tbody {display: table; width: 100%; table-layout: fixed;}/*这一句重点重点重点*/
</style>
<table border="1" cellspacing="0" cellpadding="0" bordercolor="#ccc">
		    <thead>
				<tr align="center">
					<th width="80">操作类型</th>
					<th width="130">操作时间</th>
					<th width="80">状态</th>
					<th width="80">操作</th>
				</tr>
			</thead>
			<tbody>
                <!--tbody下的第一行必须指定和theadl里面th一样的width,否则容易错位-->
				<tr align="center">
					<td width="80">1问卷调查</td>
					<td width="130">2023-02-26 10:44:13</td>
					<td width="80">已完成</td>
					<td width="80"><span class="blueColor">反馈</span></td>
				</tr>
				<tr align="center">
					<td>阶段性调查</td>
					<td>2023-02-26 10:44:13</td>
					<td>已完成</td>
					<td><span class="blueColor">反馈</span></td>
				</tr>
				<tr align="center">
					<td>产品调查</td>
					<td>2023-02-26 10:44:13</td>
					<td>已完成</td>
					<td><span class="blueColor">反馈</span></td>
				</tr>
                <tr align="center">
					<td>问卷调查</td>
					<td>2023-02-26 10:44:13</td>
					<td>已完成</td>
					<td><span class="blueColor">反馈</span></td>
				</tr>
                ......
			</tbody>
		</table>

 至此,完美解决,IOS和Android都能使用css完美展现表头吸顶效果

原文地址:https://blog.csdn.net/zlyibodan/article/details/128938919

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_14707.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注