表格【table标签】固定表头小技巧

近期开发一个小项目,由于项目本身比较小巧,所以也没考虑使用ui框架,项目纯手写html+css+js,由于页面的表格数据后台没有返回分页数据,导致整个表格集体向上滑动,故产品提出将table表格表头固定的小需求

尝试了很多种方法,thead不能单独脱离出来,否则整个table就瘫痪了,在无意中发现了一个合并表头的小技巧,完美解决当前的这个表头固定的小需求,下面让我们一起看一下展示效果吧:

表格【table标签】固定表头小技巧_第1张图片

 

接下来我们来看代码实现思路吧:【可能有小伙伴会提出疑问,不要急下面我会为大家解读要点:】




    
    
    
    Document
    


    
姓名 性别 年龄 工作 出生年月 现居住址
刘德华 56 演员 1966-06-28 香港特别行政区
陈港生 56 演员 1966-06-28 香港特别行政区
郑伊健 56 演员 1966-06-28 香港特别行政区
陈小春 56 演员 1966-06-28 香港特别行政区

相信你们的疑问肯定是这里吧:



   
   
   
   
   
   

表格【table标签】固定表头小技巧_第2张图片

 

表格【table标签】固定表头小技巧_第3张图片

 

当然有的人可能不使用table做表格数据的渲染,其实我觉得table还是很方便的,能够自适应浏览器的宽度

亲测:IE浏览器包括:ie9及以上ie浏览器支持,360极速浏览器极速模式支持,兼容模式支持【这个兼容模式貌似没有ie浏览器的准确,竟然在360的兼容模式仿真效果完美兼容,火狐浏览器也是完美兼容的】

你可能感兴趣的:(表格【table标签】固定表头小技巧)