最近尝试了几种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. Spring Boot + Spring Cloud 实现权限管理系统 后端篇（九）：代码整理优化

    工程规划 为了统一配置和代码解耦,我们对代码重新进行了整理和规划. 重新规划后,代码结构如下: kitty-pom: 统一管理 Maven 版本,打包配置 kitty-common: 公共代码模块,主 ...

  2. canvas实现涂鸦板

    实现思路:监听鼠标按下.移动.松开事件,将鼠标按下的值赋值给moveTo的x和y值,作为起始位置.在移动事件中,将鼠标距离可视区x和y值赋给lineTo,再将路径闭合.以下是具体的代码 <!DO ...

  3. postgresql 创建用户并创建数据库

    首先通过 sudo -i -u postgres 以管理员身份 postgres 登陆,然后通过 createuser --interactive (-- interactive 是交互式,创建过程可 ...

  4. CentOS 7通过RVM来安装指定版本的Ruby

    RVM也就是Ruby Version Manager,Ruby版本管理器 1.安装依赖库: yum install gcc-c++ patch readline readline-devel zlib ...

  5. 为MVC应用程序创建导航条

    今晚写点什么呢?对于以前的练习,看来看去,好象还差一个菜单导航条.在练习的站点中,有创建了三个控制器,我们就用它们来创建一个导航条吧.想实现这导航条,刚开始还是有点难,还是想起以前ASP.NET的Me ...

  6. Oracle XE快捷版（速成版）的限制

    1.CPU上限:无论把数据库安装在多少核的服务器上,都只会提供一个CPU核心的运算能力 2.安装和执行限制:只能安装一个实例且只能运行一个实例 3.用户数据上限:最大11G的用户数据 4.内存使用上限 ...

  7. gulp自动添加版本号过程中的一些要点记录

    1.打开node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新为: manifest[orig ...

  8. C#常见几道面试题

    首先碰到的是这样的一首题目:计算数组{1,1,2,3,5,8.......} 第30位值,不用递归,我写出了以下这样的代码: static void Main(string[] args) { ]; ...

  9. @Html.Raw() 与Newtonsoft.Json.JsonConvert.SerializeObject()

    一.后台 ViewBag.TypeList = typeList; 二.前台C# @{     var typeListFirst = ViewBag.TypeList;} 三.前台js中 var t ...

  10. MVC解决WebFrom的缺点

    来自:http://www.cnblogs.com/xiaozhi_5638/p/4019065.html ASP.NET Webforms Behind Code的好处和存在的问题 ASP.NET ...