HTML table固定表头
最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬.....
1.thead和tbody的display设置为block;
这种可以实现,但是需要提前设置好每个th和td的宽度,否则th和对应的td会错开,无法对齐;
2.用两个table模拟,第一个作为thead,第二个作为tbody;
需要动态设置单元格宽度,基本上满足需求,但是在firefox中,会有一点点瑕疵,单元格边框会错开一点点;
3.今天在<前端乱炖>上找到的一个好方法,很好用,利用transform动态设置thead的scrollTop属性
模拟出来的固定表头,相对前两个方法简单很多,效果也很不错;
下面是原文链接:
2017-0524
有朋友发现了第三种方法的一个bug
没有边框是是没有任何问题的 如果th,td有边框的话 在滚动之后,th的边框会消失
经测试,发现原因为在transform时,th中的边框并没有移动,只有文字内容和背景色移动了, 而且再移动回初始位置时(即表格顶部),
背景色会盖在边框上面,导致看不到th的边框了
暂时只想到了一种勉强的替代方法, 就是在th中增加div, 这样 背景色,文字内容在滚动时,便不会覆盖边框了
但是在滚动时, 还是会有点儿瑕疵....
如果路过的大神感兴趣....希望能够帮忙解决掉......
HTML table固定表头的更多相关文章
- Table 固定表头的几种方法
<style type="text/css"> /*所有内容都在这个DIV内*/ div.all { border: 3px solid #FF00FF; width: ...
- html table 固定表头和列
/**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...
- table 固定表头
1 .table { border-collapse: collapse; } .table th { display: table-cell; } .fixedThead {//thead disp ...
- element table固定表头,表的高度自适应解决方法
主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...
- (转)supertable像excel那样固定table的表头和第一列
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...
- css实现“固定表头带滚动条”的table
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- html Table实现表头固定
最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那 ...
- Saiku如何固定查询结果table的表头和首列
在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...
- 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐
在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...
随机推荐
- php -- 获取函数参数
----- 015-parameter.php ----- <!DOCTYPE html> <html> <head> <meta http-equiv=&q ...
- tomcat 调优-生产环境必备
目录 1. tomcat 启动慢 1.1 tomcat 获取随机值阻塞 1.2 tomcat 需要部署的web应用程序太多 1.3 tomcat启动内存不足 2 Connector 调优 2.2 Co ...
- maven install 打包 报错 Cannot run program "gpg.exe": CreateProcess error
打包报错, mvn install后加上参数-Dgpg.skip,例如:mvn install -Dgpg.skip 即可解决. 我们也可以去掉 这个 插件 <plugin> ...
- 21-hadoop-weibo推送广告
1, tf-idf 计算每个人的词条中的重要度 需要3个mapreduce 的 job执行, 第一个计算 TF 和 n, 第二个计算 DF, 第三个代入公式计算结果值 1, 第一个job packag ...
- Tomcat学习总结(13)—— Tomcat常用参数配置说明
1.修改端口号 Tomcat端口配置在server.xml文件的Connector标签中,默认为8080,可根据实际情况修改. 修改端口号 2.解决URL中文参数乱码 在server.xml文件的Co ...
- js设计模式之发布/订阅模式模式
一.前言 发布订阅模式,基于一个主题/事件通道,希望接收通知的对象(称为subscriber)通过自定义事件订阅主题,被激活事件的对象(称为publisher)通过发布主题事件的方式被通知. 就和用户 ...
- php功底你修炼到哪一级
第一阶段:基础阶段(基础PHP程序员) 重点:把LNMP搞熟练(核心是安装配置基本操作) 目标:能够完成基本的LNMP系统安装,简单配置维护:能够做基本的简单系统的PHP开发:能够在PHP中型系统中支 ...
- UVa 442 Matrix Chain Multiplication(栈的应用)
题目链接: https://cn.vjudge.net/problem/UVA-442 /* 问题 输入有括号表示优先级的矩阵链乘式子,计算该式进行的乘法次数之和 解题思路 栈的应用,直接忽视左括号, ...
- 如何使SpringBoot作为Maven构建的项目的一个子模块
1.问题 一般使用springboot都会引用springboot作为parent,在实际项目中web只是系统模块的一个子集.当然你可以做两个项目来管理,一个项目用来做各种支持包,一个项目专门做web ...
- Book Contents Reviews Notes Errata Articles Talks Downloads Resources Code Formatter Cover of C# in Depth Order now (3rd edition) Implementing the Singleton Pattern in C#
原文链接地址: http://csharpindepth.com/Articles/General/Singleton.aspx#unsafe Implementing the Singleton P ...