table固定表头和首列

html部分，结构上分为左右两部分，又分别拆开为上下两部分，总共四个结构部分，以下为固定首行和首列，需要固定多行多列的可以自行添加，如下列表中姓名为左上角固定不变的位置，可自行添加多个。

<div class="container"><div id="left_div">***<!--左上角固定不变的位置-->***<div id="left_div1"><table id="left_table1" class="table table-bordered"><tr><th>姓名</th></tr></table></div>***<!--首列，不包含左上角固定位置-->***<div id="left_div2"><table id="left_table2" class="table table-bordered"></table></div></div><div id="right_div">***<!--右侧表头-->***<div id="right_div1"><div id="right_divx"><table id="right_table1" class="table-bordered"><tr><th>员工状态</th><th>部门</th><th>应出勤天数</th><th>实际出勤天数</th><th>迟到次数</th><th>迟到时长</th><th>早退次数</th><th>早退时长</th><th>漏打卡次数</th><th>外勤次数</th><th>旷工天数</th><th class="jiaban-th"><p>加班-按加班规则计算</p><p><span>工作日加班</span><span>休息日加班</span><span>节假日加班</span></p></th><th>本月共请假时间（天）</th><th>使用年假（天）</th><th>使用调休（天）</th></tr></table></div></div>***<!--右侧底部-->***<div id="right_div2"><table id="right_table2" class="table table-bordered"></table></div></div>
</div>

css部分，根据需要自行修改

/*报表格式*/.staff-list-sheet {padding: 0;
}#left_div {width: 150px;float: left;background: #fff;
}#left_div1 {width: 100%;
}#left_div2 {margin-top: -20px;width: 100%;height: 400px;overflow: hidden;
}#left_table2 {margin-bottom: 0;
}#left_table1 th {background: #ef7550;text-align: center;height: 40px;line-height: 40px;padding: 0;font-size: 14px;color: #fff;display: inline-block;width: 150px;
}#left_table2 th {width: 150px;text-align: center;height: 40px;line-height: 40px;padding: 0;font-size: 14px;color: #000;border: 1px solid #f0f0f0;display: inline-block;border-bottom: 0;
}#right_divx {width: 100%;
}#right_div {float: left;overflow: scroll;
}#right_div1 {width: 250%;overflow: hidden;
}#right_div2 {width: 250%;height: 400px;overflow: auto;
}#right_table1 {width: 100%;margin-bottom: 0;
}
#right_table1 th{display: inline-block;
}
#right_table1 th.jiaban-th {width: 451px;font-size: 0;position: relative;
}#right_table1 th.jiaban-th p{margin: 0;padding: 0;
}
#right_table1 th.jiaban-th p:nth-of-type(2){position: absolute;top: 20px;left: 0;font-size: 0;
}
#right_table1 th.jiaban-th p,
#right_table1 th.jiaban-th p span{display: inline-block;height: 13px;line-height: 20px;font-size: 12px;color: #fff;
}
#right_table1 th.jiaban-th p span:nth-of-type(2){border-right: 1px solid #fff;border-left: 1px solid #fff;
}#right_table1 th.jiaban-th p span{display: inline-block;width: 150px;
}#right_table2 {width: 100%;max-width: 100%;white-space: nowrap;background: #fff;margin-bottom: 0;
}#right_table1 th {background: #ef7550;text-align: center;width: 150px;height: 40px;line-height: 40px;padding: 0;color: #fff;font-size: 14px;
}#right_table2 td {width: 150px;height: 40px;line-height: 40px;padding: 0;text-align: center;display: inline-block;
}.table-bordered>thead>tr>th,
.table-bordered>tbody>tr>th,
.table-bordered>tfoot>tr>th {border: 1px solid #fff;border-top: 0;border-left: 0;
}.table-bordered>thead>tr>td,
.table-bordered>tbody>tr>td,
.table-bordered>tfoot>tr>td {border: 1px solid #f0f0f0;border-bottom: 0;border-left: 0;
}.table-bordered {border: #fff;
}#right_table2 .status span {width: 60px;height: 20px;border-radius: 20px;background: #31b5f0;padding-left: 0;line-height: 20px;color: #fff;display: inline-block;font-size: 14px;
}#right_table2 .zhengshi span {background: #21BCC2;
}
#right_table2 .shiyong span {background: #fb5755;
}
#right_table2 .dairuzhi span {background: #31b5f0;
}

js部分

//固定和滚动var right_div2 = document.getElementById("right_div2");right_div2.onscroll = function() {var right_div2_top = this.scrollTop;var right_div2_left = this.scrollLeft;document.getElementById("left_div2").scrollTop = right_div2_top;document.getElementById("right_div1").scrollLeft = right_div2_left;}//设置右边div宽度document.getElementById("right_div").style.width = "" + 1200 - 150 + "px";setInterval(function() {document.getElementById("right_div").style.width = "" + 1200 - 150 + "px";}, 0);for(var i = 0; i < 24; i++) {/** left_table2  是左侧姓名第一列，单独设置* right_table2 是右侧除了表头剩余的其他部分，单独设置*/var strRightTable2 = '<tr>' +'<td class="zhengshi status"><span>正式</span></td>' +'<td>产品</td>' +'<td>31</td>' +'<td>3</td>' +'<td>12分钟</td>' +'<td>2</td>' +'<td>32分钟</td>' +'<td>1</td>' +'<td>2</td>' +'<td>3</td>' +'<td>3</td>' +'<td class="jiaban-gongzuo">3</td>' +'<td class="jiaban-xiuxi">3</td>' +'<td class="jiaban-jiejia">3</td>' +'<td>1</td>' +'<td>2</td>' +'<td>4</td>' +'</tr>'$("#left_table2").append("<tr><th>张大毛</th></tr>");$("#right_table2").append(strRightTable2);}//动态计算滚动区域宽度var th_list = $("#right_table1 th");var _width = 0;for(var i = 0; i < th_list.length; i++) {var th_wisth = $("#right_table1 th").eq(i).width();//加上border的宽度_width += th_wisth;}_width = _width + th_list.length;$("#right_div1").width(_width);$("#right_div2").width(_width);

最终这样：

table固定表头和首列相关推荐

纯CSS实现Table固定表头和首列
Table固定表头和首列这种需求应该比较常见.以往的做法,需要写一大堆脚本,而现在,可以使用position:sticky轻松实现这个效果. .table-container {width: 100% ...
el table 固定表头和首行_vue表格实现固定表头首列
前言最近在做vue移动端项目,需要做一个可以固定表头首列的表格,而且由于一些原因不能使用任何UI插件,网上找了很久也没什么好方法,所以在解决了问题之后,写下了这篇文章供后来人参考,文章有什么错漏的问 ...
微信小程序 table表格固定表头和首列右侧表格可以左右滚动（多种表格演练）
最近在做公司的项目需要到表格展示数据,但是微信小程序是没有原生table标签的,于是就百度各种搜...发现结构有类似的就粘过来修改,要善于学习和借鉴别人的经验使其变成为自己的东西,学无止境~ 在这里做 ...
el table 固定表头和首行_el-table表头根据内容自适应，解决表头错位和固定列错位（完美解决）...
将代码复制到指令中即可使用.通过指令方式进行调用.(使用方式 ) 通过计算文字的宽度进行表头设置,其他内容无法计算. 5000个单元格以上根据实际情况使用以上根据实际情况使用,因为单元格越多,计算时间 ...
el table 固定表头和首行_表头太太太复杂了，如何批量打印？简单！
点击上方蓝字关注星标★不迷路本文作者:小敏本文编辑:小叮.竺兰打印工资条估计是财务老师的痛,要把一行行的数据,变成一条条的工资条. 数据很多,表头很复杂. 一个个复制粘贴?那是不可能的! 那怎么办 ...
H5移动端滑动表格固定表头和首列（纯css实现）
HTML部分 <template><div class="contain"><table class=" ...
table固定表头行及列，其中行包含合并单元格
---恢复内容开始--- PS:文中代码大部分不出自原创,在原有的基础上修改成自己想要的效果给大家参考,如有不妥,请联系我删除. 该效果由纯html+css实现,经测试不支持IE,需要支持IE版本参考 ...
table表头和首列的表格固定-CSS实现的Table表头固定
效果就是上图表头是固定的, 跟随滑动轴动,左边第一列也是可以跟谁滑动轴滚动下面是代码原文是查看 <!DOCTYPE html> <html> <head> &l ...
html表格类似excel固定表头样式,(转)supertable像excel那样固定table的表头和第一列...
像excel那样固定table的表头和第一列 .left,.right{float: left;height: 297px;background-color: #ccc;} #left_topic{h ...

table固定表头和首列

table固定表头和首列

table固定表头和首列相关推荐

最新文章

热门文章