原生table如何实现表格首行标题冻结

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

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

&lt;style&gt;
   table {width:100%; table-layout: fixed;}
   table thead {position:sticky; top:-1px;} /*或者table th {position:sticky; top:-1px;}*/
&lt;/style&gt;
&lt;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>