CSS实战 | 磁性页头和页脚的表格制作

726 阅读5分钟

【这是我参与更文挑战的第 17 天,活动详情查看: 更文挑战”】

表格,是用来展示记录集常用的标签,现如今各种终端设备,大分辨率、小分辨率等等,让表格展现数据变得不那么直观,如表头被滚动条操作移除可视范围导致查看数据不够友好。说到表格数据查看的方便性,大家首先想到的应该是Excel。没错,这里跟大家分享一个操作便捷且直观的响应式表格制作方式,以后在项目中或许能够用上,当然现在很多框架都实现了这样的效果。

为什么叫磁性页头页脚表格,是因为体验的效果像磁铁一样吸在顶部或者底部。

实现磁性响应式表格主要用到属性 position:sticky

position:sticky 元素根据正常文档流进行定位,然后相对它的最近滚动祖先(nearest scrolling ancestor)和 containing block (最近块级祖先 nearest block-level ancestor),包括table-related元素,基于toprightbottomlef 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>

没有样式的效果如下:

image.png

现在来为页面进行美化,样式如下:

.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,可以点击进入查看:

1f483785-d2c9-4546-8463-75003e92b707.gif

接下来继续优化,使左右也能够吸住,修改样式,增加以下代码:

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;
}

效果如下:

ad02f292-1ba8-4673-9ad4-30c279689515.gif

至此,一个磁性响应式表格制作完成,想必获取能够带来一点灵感。

过去,这种效果基本都需要通过 Javascript 来协助完成,绑定滚动事件,相比通过 CSS 的position:sticky 来说,是一个比较“昂贵”的处理方案。

Safari 需要加一个前缀:-webkit-sticky,即 position: -webkit-sticky;

position:sticky 存在兼容性问题,在微信里面目前是无法达到预期效果,这个时候就需要使用 Javascript ,提供一个参考 或者选择脚本库:

  • stickyfill
  • StickyBits 是一个 Github 上的一个脚本库,可以让元素表现得像粘性一样。

总结

本文介绍了 position:sticky 一个简单的实现。