制作过程
其实表头的固定就相当于使用两个表格，一个在上面，一个在下面，上下排列，下面的表格容器可以滚动，上面的只有表头一行，为了让两个表格各列的宽度一致，可以获取下面表格各列的宽度，然后给上面表格添加对应的width，下面的代码是事例，浏览器可以运行
表格列可以将一个input放入td，这样就可以编辑表格内容，通过focus和blur可以为单元格添加不同的style。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML冻结表头和侧边栏，表格内容可编辑</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<style>
.divleft {
width: 150px;
float: left;
box-shadow: 0 0px 3px 3px rgba(0,0,0,.1);
}
.divright {
width: calc(100% - 150px);
float: left;
overflow: auto;
}
input {
outline: none;
border: none;
width: 100%;
height: calc(100% - 2px);
background: transparent;
}
.abtn {
font-size: 12px;
color: #448AFF;
float: left;
margin: 0 5px;
width: 40px;
height: 16px;
text-align: center;
cursor: pointer;
line-height: 16px;
text-decoration:underline
}
table {
margin-bottom: 0px !important;
}
thead {
background: #448AFF;
color: #fff
}
#tableleft {
margin-bottom: 0px;
width: 100%;
height: 300px;
overflow: hidden;
}
#tableright {
margin-bottom: 0px;
height: 300px;
overflow: auto
}
</style>
<body>
<div style="width: 100%;overflow: auto;height: 400px">
<div class="divleft">
<table class="table table-bordered" id="tabletop1">
<thead>
<tr>
<th style="width: 40px">#</th>
<th>产品</th>
</tr>
</thead>
</table>
<div style="" id="tableleft">
<table class="table table-bordered">
<tbody>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
<tr>
<td style="width: 40px"><input value="1" disabled/></td>
<td><input value="123423123" disabled/></td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="divright">
<table class="table table-bordered" id="tabletop2">
<thead>
<tr>
<th>单位</th>
<th>产品</th>
<th>操作</th>
</tr>
</thead>
</table>
<div id="tableright">
<table class="table table-bordered">
<tbody>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="顶部的 Popover 中的一些内容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="顶部的 Popover 中的一些内容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="顶部的 Popover 中的一些内容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="顶部的 Popover 中的一些内容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="顶部的 Popover 中的一些内容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="顶部的 Popover 中的一些内容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="顶部的 Popover 中的一些内容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="顶部的 Popover 中的一些内容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="顶部的 Popover 中的一些内容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="顶部的 Popover 中的一些内容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
<tr>
<td><input value="1" /></td>
<td title="Popover title"
data-container="body" data-toggle="popover" data-placement="auto"
data-content="顶部的 Popover 中的一些内容" data-trigger="hover"><input value="123423123" /></td>
<td><div class="abtn">保存</div></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
<script>
//调用表头宽度设置函数
gettdwidth($("#tabletop2"));
//表头宽度设置函数
function gettdwidth(elme) {
var elet = elme.find("th");
//获取表格tbody中的td元素
var eleb = elme.siblings("div").find("td");
var length = elet.length;
for (var i = 0; i < length; i++) {
//最后一个表头列要将滚动条区域不全，其他和对应td宽度一致
if (i == length - 1) {
elet.eq(i).css("width", eleb.eq(i).width() + 26)
} else {
elet.eq(i).css("width", eleb.eq(i).width())
}
}
}
//bootstrap提示框，可以自定义显示内容
$(function () {
$("[data-toggle='popover']").popover();
});
//当页面resize时自适应
$(window).resize(function() {
gettdwidth($("#tabletop2"));
});
//侧边栏滚动和表格内容绑定，可以冻结侧边某列值
$("#tableright").on("scroll", function() {
var scrolltop = $(this).scrollTop();
$("#tableleft").scrollTop(scrolltop);
});
//编辑单元格
$("input").on("focus", function() {
$(this).parent().css("border-bottom", "1px solid #448AFF")
})
//单元格失去焦点
$("input").on("blur", function() {
$(this).parent().css("border-bottom", "1px solid #ddd")
})
</script>
</html>
