0
0
高洛峰
发布时间：2017-03-06 11:15:35
|2012人浏览过
|来源于php中文网
原创
前言
前段时间在工作中正好需要这个功能，但是找了很多都不能完美的实现，所以在此就自己做了一个固定表头的方法，主要用到了css3中的translate和一小段js代码，下面来一起看看吧。
效果如下：
感觉是不是很和谐，而且代码也少，不足的是IE9以下不支持translate属性，但现在也没多少要考滤IE9以下的兼容了吧，做前端老兼顾低版本的浏览器难免会让自己束手束脚。。。。
下面来看下代码吧
立即学习“前端免费学习笔记（深入）”；
HTML
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
|---|
CSS样式
JS脚本
更多详解利用css3 translate完美实现表头固定效果示例相关文章请关注PHP中文网！
相关文章
如何在CSS中实现响应式表格布局_Grid template-rows template-columns优化方案
CSS盒模型与定位结合应用_position relative absolute fixed sticky解析
csssticky元素与表格布局结合
如何在CSS中使用sticky定位_Sticky header滚动粘性布局方法
CSS定位中sticky是如何工作的_粘性定位使用方法与注意事项
本站声明：本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热门AI工具
相关专题
本专题聚焦 PHP 在表单处理与文件上传场景中的实战与安全问题，系统讲解表单数据获取与校验、XSS 与 CSRF 防护、文件类型与大小限制、上传目录安全配置、恶意文件识别以及常见安全漏洞的防范策略。通过贴近真实业务的案例，帮助学习者掌握 安全、规范地处理用户输入与文件上传的完整开发流程。
3
2026.01.13
本专题系统讲解 Java 项目构建与依赖管理的完整体系，重点覆盖 Maven 与 Gradle 的核心概念、项目生命周期、依赖冲突解决、多模块项目管理、构建加速与版本发布规范。通过真实项目结构示例，帮助学习者掌握 从零搭建、维护到发布 Java 工程的标准化流程，提升在实际团队开发中的工程能力与协作效率。
19
2026.01.12
热门下载
相关下载
精品课程
最新文章
Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
