最近尝试了几种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. vue2.0和better-scroll实现左右联动效果

    在做移动端商城或者其他页面的时候,经常会遇到左右联动的效果,今天小编vue2.0和better-scroll这个插件一起实现左右联动效果. 实现上面的效果,思路一定很重要,还有需求 1. 左边一级分类 ...

  2. JAVA多线程Thread VS Runnable详解

    要求 必备知识 本文要求基本了解JAVA编程知识. 开发环境 windows 7/EditPlus 演示地址 源文件   进程与线程 进程是程序在处理机中的一次运行.一个进程既包括其所要执行的指令,也 ...

  3. MyCat配置文件详解--server.xml

    server.xml包含mycat的系统配置信息,它有两个标签,分别是user和system,掌握system标签的各项配置属性是mycat调优的关键. <?xml version=" ...

  4. ElasticSearch 基础<转载>

    使用curl命令操作elasticsearch 大岩不灿 发表于 2015年4月25日 浏览 13,463 次 第一:_cat系列_cat系列提供了一系列查询elasticsearch集群状态的接口. ...

  5. linux查看系统的硬件信息【转】

    linux查看系统的硬件信息,并不像windows那么直观,这里我罗列了查看系统信息的实用命令,并做了分类,实例解说. cpu lscpu命令,查看的是cpu的统计信息. blue@blue-pc:~ ...

  6. 利用nginx解决跨域问题

    访问我的博客 前言 最近遇到了跨域问题,结合之前[微信支付开发本地接收异步通知回调]的经验,利用 Nginx 实现了跨域. 公司之前为了解决跨域问题,用的是 iFrame,反正对于只做后端的我而言,觉 ...

  7. mongo学习使用记录2 spring data

    spring data mongo 打印mongo NoSql语句 log4j.properties log4j.rootLogger=INFO, stdout log4j.logger.org.sp ...

  8. Centos7 安装字体库&中文字体

    1.概述 在安装一些服务的时候,会涉及到字符编码与字体的问题,字符编码一般在数据库或代码级别设置,字体一般是在系统级别设置.如安装使用jira或confluence的时候,使用一些宏的时候经常会出现乱 ...

  9. 阿里云服务器搭建SVN

    简单步骤介绍 1:安装svn apt-get install subversion 2. 开启svn服务器 svnserve -d 检查是否开启:ps aux | grep svnserve 若出现如 ...

  10. [转]解决Magento批量导入带图片的商品的问题

    本文转自:http://www.phpstudio.info/show-121-791-1.html 一般来说,Magento后台管理里的CSV批量导入,可以解决我们商品批量上传的大部分问题,我们只要 ...