表格，是用来展示记录集常用的标签，现如今各种终端设备，大分辨率、小分辨率等等，让表格展现数据变得不那么直观，如表头被滚动条操作移除可视范围导致查看数据不够友好。说到表格数据查看的方便性，大家首先想到的应该是 Excel。没错，这里跟大家分享一个操作便捷且直观的响应式表格制作方式，以后在项目中或许能够用上，当然现在很多框架都实现了这样的效果。
为什么叫磁性页头页脚表格，是因为体验的效果像磁铁一样吸在顶部或者底部。
实现磁性响应式表格主要用到属性 position:sticky。
position:sticky 元素根据正常文档流进行定位，然后相对它的最近滚动祖先（nearest scrolling ancestor）和 containing block (最近块级祖先 nearest block-level ancestor)，包括table-related元素，基于top、right、bottom 和 lef t 的值进行偏移，偏移值不会影响任何其他元素的位置。
最近欧洲杯正在激烈的激战，本文示例以欧洲杯相关数据为展示，按照正常制作流程，先完成 html 代码，如下：
<div class="container"> <div class="text-box"> <h1>欧洲足球锦标赛</h1> <p> 欧洲足球锦标赛（英语：UEFA European Football Championship），简称欧锦赛、欧洲杯，是一项由欧洲足联成员国间参加的最高级别国家级足球赛事，赛事最初的目的是为了填补两届国际足联世界杯之间4年的空白，从而让欧洲各国有更多的比赛机会。1960年举行第一届，当时名为欧洲国家杯（European Nations Cup；简称欧国杯），其后每四年举行一届。1968年改名为现在的欧洲足球锦标赛（European Football Championship），但港澳台地区至今仍经常把这项比赛惯称为“欧洲国家杯”。 </p> <p> 2020年欧洲足球锦标赛（英语：UEFA EURO 2020，通称2020年欧洲杯）是第16届欧洲足球锦标赛。欧洲足球锦标赛是由欧洲足球联合会联盟（UEFA）主办的、由来自欧洲的男子国家足球队参与的四年一度的杯赛。 </p> <p> 该赛事原定于2020年6月12日至7月12日举行。但由于2019冠状病毒病疫情，比赛被推迟到2021年6月11日至7月11日。 </p> </div> <table> <thead> <tr> <th>球员名称</th> <th>国家</th> <th>司职</th> <th>效力俱乐部</th> <th>出生日期</th> <th>球衣号码</th> <th>进球数量</th> </tr> </thead> <tfoot> <tr> <th>球员名称</th> <th>国家</th> <th>司职</th> <th>效力俱乐部</th> <th>出生日期</th> <th>球衣号码</th> <th>进球数量</th> </tr> </tfoot> <tbody> <tr> <th>克里斯蒂亚诺·罗纳尔多</th> <td>葡萄牙</td> <td>边锋／中锋</td> <td>尤文图斯</td> <td>1985年2月5日</td> <td>7号</td> <td>2</td> </tr>
<tr> <th>罗梅卢·卢卡库</th> <td>比利时</td> <td>前锋</td> <td>国际米兰</td> <td>1993年5月13日</td> <td>9号</td> <td>2</td> </tr>
<tr> <th>帕特里克·希克</th> <td>捷克</td> <td>前锋</td> <td>勒沃库森</td> <td>1996年1月24日</td> <td>10号</td> <td>2</td> </tr>
<tr> <th>布雷尔·恩博洛</th> <td>瑞士</td> <td>前锋</td> <td>门兴格拉德巴赫</td> <td>1997年2月14日</td> <td>7号</td> <td>1</td> </tr>
<tr> <th>丹泽尔·邓弗里斯</th> <td>荷兰</td> <td>后卫</td> <td>PSV埃因霍温</td> <td>1996年4月18日</td> <td>22号</td> <td>1</td> </tr>
<tr> <th>戈兰·潘德夫</th> <td>北马其顿</td> <td>前锋</td> <td>热那亚板球与</td> <td>1983年7月27日</td> <td>10号</td> <td>1</td> </tr>
<tr> <th>基弗·穆尔</th> <td>威尔士</td> <td>前锋</td> <td>加的夫城</td> <td>1992年8月8日</td> <td>13号</td> <td>1</td> </tr>
<tr> <th>卡罗尔·利内蒂</th> <td>波兰</td> <td>中场</td> <td>都灵</td> <td>1995年2月2日</td> <td>8号</td> <td>1</td> </tr>
<tr> <th>洛伦佐·因西涅</th> <td>意大利</td> <td>前锋</td> <td>那不勒斯</td> <td>1991年6月4日</td> <td>24号</td> <td>1</td> </tr> <tr> <th>米兰·什克里尼亚尔</th> <td>斯洛伐克</td> <td>后卫</td> <td>国际米兰</td> <td>1995年2月11日</td> <td>37号</td> <td>1</td> </tr> </tbody> </table> <div class="text-box"> <p>该赛事在11个欧足联成员的11个城市举办，这是为了庆祝欧洲杯60周年。</p> </div></div>
复制代码
没有样式的效果如下：
现在来为页面进行美化，样式如下：
.container { max-width: 1000px; margin: 0px auto;}.text-box { padding-bottom: 1rem;}.text-box h1 { font-size: 2rem; width: 100%; text-align: center;}.text-box p { margin-bottom: 2rem; text-indent: 32px; line-height: 2;}table { border-collapse: collapse; width: 100%;}
thead,tfoot { position: sticky; background: #eee;}thead { top: 0; border-bottom: 2px solid #ccc;}thead th,tfoot th,tbody tr th { font-size: 1rem; padding: 1rem; text-align: left;}tfoot { bottom: 0; border-top: 2px solid #ccc;}
tbody tr td { font-size: 0.8rem; padding: 1rem; text-align: left;}tbody tr:nth-of-type(even) { background-color: #f1f5fa;}
复制代码
效果如下，如需查看DEMO，可以点击进入查看：
接下来继续优化，使左右也能够吸住，修改样式，增加以下代码：
table td,table th { border: 1px solid #ccc; padding: 0.5rem 1rem;}table tbody th { position: sticky; left: 0; z-index: 1; background-color: #ffff00;}table tbody td:last-child { position: sticky; right: 0; background-color: #ffff00; z-index: 1;}
复制代码
效果如下：
至此，一个磁性响应式表格制作完成，想必获取能够带来一点灵感。
过去，这种效果基本都需要通过 Javascript 来协助完成，绑定滚动事件，相比通过 CSS 的position:sticky 来说，是一个比较“昂贵”的处理方案。
Safari 需要加一个前缀：-webkit-sticky，即 position: -webkit-sticky;
position:sticky 存在兼容性问题，在微信里面目前是无法达到预期效果，这个时候就需要使用 Javascript ，提供一个参考 或者选择脚本库：
总结
本文介绍了 position:sticky 一个简单的实现。
评论