table表格的thead固定,tbody展示出滚动条

我也是做了两次的table表格的thead固定,tbody展示出滚动条,第一次因为是存在有表头合并的原因没有做出来完好的效果,第二次是不仅有表头的合并,还有tbody中的rowspan的合并table表格的thead固定,tbody展示出滚动条_第1张图片

  • 第一种:针对存在有表头合并的thead固定tbody展示滚动条

效果图:

table表格的thead固定,tbody展示出滚动条_第2张图片

代码:





    
    
    



    
//tr可以多复制几行看一下效果
序号 补贴 项目 占比 住院
区数 总数   职数   班数   人员   月份 项目 单位  
金额 人次 占比 住院 补贴 占比
合并单元格 内容1 内容2 合并单元格 内容1 内容2 合并单元格 内容1 内容2 合并单元格 内容1 内容2 合并单元格 内容1 内容2 合并单元格

第一种的方法只适合tbody中没有rowspan的合并方式,如果tbody中只有colspan合并没有rowspan合并使用第一种方法就足够了,但是如果你的tbody中存在rowspan的合并,那么你就只能使用第二种方法了 

第二种:针对存在有表头合并的thead,tbody中有rowspan的合并,                  固定tbody展示滚动条

效果图:table表格的thead固定,tbody展示出滚动条_第3张图片

代码:




    
    
    



    
//将两个tr为一组,多复制几个看看效果展示
表头1 表头2 表头3
合并单元格 内容1 内容2
内容3 内容4
合并单元格 内容1 内容2
内容3 内容4

这种展示方式是有一点问题的,滚动条往上滚动时,thead的不管是合并的还是没合并的都边框线会消失,但是总体效果是实现的,如果比较介意这个地方,可以暂时不使用此方法

你可能感兴趣的:(前端,vue.js)