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);
最终这样: