最近尝试了几种HTML的table固定表头的方法..额...各有利弊,但很尴尬.....

1.thead和tbody的display设置为block;

这种可以实现,但是需要提前设置好每个th和td的宽度,否则th和对应的td会错开,无法对齐;

2.用两个table模拟,第一个作为thead,第二个作为tbody;

需要动态设置单元格宽度,基本上满足需求,但是在firefox中,会有一点点瑕疵,单元格边框会错开一点点;

3.今天在<前端乱炖>上找到的一个好方法,很好用,利用transform动态设置thead的scrollTop属性

模拟出来的固定表头,相对前两个方法简单很多,效果也很不错;

下面是原文链接:

http://www.html-js.com/article/cssyanjiu-css3shixiangudingbiaogetoubuerwuxushezhidanyuangetddikuandu%204019

2017-0524

有朋友发现了第三种方法的一个bug

没有边框是是没有任何问题的   如果th,td有边框的话  在滚动之后,th的边框会消失

经测试,发现原因为在transform时,th中的边框并没有移动,只有文字内容和背景色移动了, 而且再移动回初始位置时(即表格顶部),

背景色会盖在边框上面,导致看不到th的边框了

暂时只想到了一种勉强的替代方法, 就是在th中增加div, 这样 背景色,文字内容在滚动时,便不会覆盖边框了

但是在滚动时, 还是会有点儿瑕疵....

如果路过的大神感兴趣....希望能够帮忙解决掉......

HTML table固定表头的更多相关文章

  1. Table 固定表头的几种方法

    <style type="text/css"> /*所有内容都在这个DIV内*/ div.all { border: 3px solid #FF00FF; width: ...

  2. html table 固定表头和列

    /**************************************************************** jQuery 插件. 功能: 固定表格标题行或列头 Version: ...

  3. table 固定表头

    1 .table { border-collapse: collapse; } .table th { display: table-cell; } .fixedThead {//thead disp ...

  4. element table固定表头，表的高度自适应解决方法

    主要是通过在mounted生命周期中,改变tableHeight的值,来让表格的高度自适应. 标签: <el-table ref="table" :data="ta ...

  5. (转)supertable像excel那样固定table的表头和第一列

    <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title> ...

  6. css实现“固定表头带滚动条”的table

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  7. html Table实现表头固定

    最近一直在搞前台琐碎的东西,也学习了一下linux,没有时间对新的东西进行深入的研究和学习,没有写博客,不过归咎其原因还是在于自己的惰怠. 废话不多说,今天想将一个前台页面设计的一个小东西分享一下,那 ...

  8. Saiku如何固定查询结果table的表头和首列

    在使用saiku查询的时候,当“行”和“列”的维度内容过多时,在查看时只看到数据,不知道是什么数据,维度不清楚,得来回拖动滚动条才行,所以同事提出想要固定“表头”和“首列”. 在网上找了一些现成的插件 ...

  9. 使用bootstrap table 插件固定表头时 表头与表格内容无法对齐

    在使用bootstrap table开发后台管理系统,表格利用bootstrap-table插件来实现,使用bootstrap-table过程中,会出现表头错位的情况 表头对不齐效果: 解决的方法: ...

随机推荐

  1. windows下通过VNC图形化访问Ubuntu桌面环境

    要在windows下图形化访问Ubuntu或其它Linux系统桌面环境有很多方法,我比较喜欢的是使用VNC服务,需要在Ubuntu下安装vncserver和在windows下安装客户端访问工具. 1. ...

  2. Hibernate关联关系映射之一对一（主键关联）

    在业务成的域模型中,类和类之间最普遍的关系就是关联关系,而关联也是有方向的. 就以例子来说明:一个人对应一张身份证.对其进行增删改. 对于人在数据创建表的时候,我们就给他两个字段,一个是id号,一个就 ...

  3. java sendmail

    http://blog.csdn.net/Guerlei/article/details/53189522

  4. js设计模式总结3

    1.模板方法模式 模板方法就是将多个模型抽象化归一,从中取出一个最基本的模板,当然这个模板可以作为实体对象也可以作为抽象对象,看你具体需求,其他模块只需要继承这个模块方法,也可以扩展这个方法. 举例子 ...

  5. Spark入门——什么是Hadoop，为什么是Spark?

    #Spark入门#这个系列课程,是综合于我从2017年3月分到今年7月份为止学习并使用Spark的使用心得感悟,暂定于每周更新,以后可能会上传讲课视频和PPT,目前先在博客园把稿子打好.注意:这只是一 ...

  6. webpack3新特性简介

    6月20号webpack推出了3.0版本,官方也发布了公告.根据公告介绍,webpack团队将未来版本的改动聚焦在社区提出的功能需求,同时将保持一个快速.稳定的发布节奏.本文主要依据公告内容,简单介绍 ...

  7. WPF命令（Command）介绍、命令和数据绑定集成应用

    要开始使用命令,必须做三件事: 一:定义一个命令 二:定义命令的实现 三:为命令创建一个触发器 WPF中命令系统的基础是一个相对简单的ICommand的接口,代码如下: public interfac ...

  8. 【Java并发编程】7、线程池

    1. 为什么使用线程池 诸如 Web 服务器.数据库服务器.文件服务器或邮件服务器之类的许多服务器应用程序都面向处理来自某些远程来源的大量短小的任务.请求以某种方式到达服务器,这种方式可能是通过网络协 ...

  9. java自动生成代码

    看到这个标题,如果你以为真的可以完全自动生成,那你就太Naive啦 我这里想介绍的是,利用模板生成我们需要的代码 一.模板 首先来说说模板,常见的java模板有:FreeMarker.Velocity ...

  10. 批量导出VBA工程中的Source

    在做Excel宏相关项目的开发和维护过程中,我们经常需要导出VBA中的Source,但是Excel提供的宏编辑器中只能一个文件一个文件地导出,很不方便. 下面介绍2种批量导出的方法: 1．Source ...