<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="https://code.jquery.com/jquery-1.11.3.js">
</script>
</head>
<body>
<div id="main">
<div id="bg1" >
<table id="table2" border="1px">
<thead>
<tr>
<th>序号</th>
<th>sdfsdgsgsdg</th>
<th>dfgccccccccccccccc</th>
<th>tghrthrhrhh</th>
<th>yyyy</th>
</tr>
</thead>
</table>
<table id="table1" border="1px">
<thead>
<tr>
<th>序号</th>
<th>sdfsdgsgsdg</th>
<th>dfgccccccccccccccc</th>
<th>tghrthrhrhh</th>
<th>yyyy</th>
</tr>
</thead>
<tbody>
<tr>
<td>xxx</td>
<td>2</td>
<td>32g反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复反反复复</td>
<td><div style="width:50px;word-wrap: break-word;">4defdfdfdfwerwerwerwerwerwerwerwerwrwerwerwerwerwrdfdfdfdfdfdf</div></td>
<td>反反复复反反复复</td>
</tr>
<tr>
<td>1111111</td>
<td>2</td>
<td>32</td>
<td>4defdfdfdfdfdfdfdfdfdf</td>
<td>反反复复反反复复</td>
</tr>
<tr>
<td>1111111</td>
<td>2</td>
<td>32</td>
<td>4defdfdccccccccccccccccccccfdfdfdfdfdfdfdf</td>
<td>反反复复反反复复</td>
</tr>
<tr>
<td>1111111</td>
<td>2</td>
<td>32</td>
<td>4defdfdfdfdfdfdfdfdfdf</td>
<td>反反复复反反复复</td>
</tr>
<tr>
<td>1111111</td>
<td>2</td>
<td>32</td>
<td>4defdfdfdfdfdfdfdfdfdf</td>
<td>反反复复反反复复</td>
</tr>
<tr>
<td>1111111</td>
<td>2</td>
<td>32</td>
<td>4defdfdfdfdfdfdfdfdfdf</td>
<td>333</td>
</tr>
</tbody>
</table>
</div>
<div id="bg2">
<div></div>
</div>
</div>
<script>
function initScrollBar(mainSelector, leftBlankSelector, rightScrollBarSelector, theadTableSelector, tbodyTableSelector, width, height){
// initStyle
var w = null;
if(width){
w = width + 'px';
}else{
w = 'auto';
}
var h = null;
if(height){
h = height + 'px';
}else{
h = 'auto';
}
$(mainSelector).css({
"position":"relative"
});
$(leftBlankSelector).css({
"overflow-x": "auto",
"position": "relative",
"width": w
});
$(theadTableSelector).css({
"display": "block",
"background-color": "#dedede",
"position": "absolute",
"background-color": "#dedede",
"top":"0"
});
$(theadTableSelector + " thead").css({
"display": "block"
});
$(tbodyTableSelector).css({
"overflow-y": "auto",
"display": "block",
"height": h
});
// initTableUI
var ttttt = [];
$(tbodyTableSelector + " thead tr th").each(function(index, jq){
jq = $(jq);
ttttt[index] = jq.width();
});
$(theadTableSelector + " thead tr th").each(function(index, jq){
jq = $(jq);
jq.css("width", ttttt[index]+"px");
});
$(theadTableSelector + " thead").css({"width":$(tbodyTableSelector + " thead").width()});
$(theadTableSelector).css("width", $(theadTableSelector + " thead").width() + "px");
if(($(tbodyTableSelector + " thead").height()+$(tbodyTableSelector + " tbody").height())>$(tbodyTableSelector).height() ){
var scrollBarWidth = $(tbodyTableSelector).width() - $(tbodyTableSelector)[0].clientWidth;
$(tbodyTableSelector).css("width", ($(theadTableSelector + " thead").width() + scrollBarWidth) + "px");
}else{
$(tbodyTableSelector).css("width", ($(theadTableSelector + " thead").width() + 0) + "px");
}
//initBg2UI
var scrollBarWidth = $(tbodyTableSelector).width() - $(tbodyTableSelector)[0].clientWidth;
$(rightScrollBarSelector).css({
"position":"absolute",
"height":$(tbodyTableSelector).height()+"px",
"width":"18px",
"top":"0",
"left":($(leftBlankSelector).width()<$(theadTableSelector).width()?$(leftBlankSelector).width()-scrollBarWidth:$(theadTableSelector).width())+"px",
"overflow-y":"auto"
});
$(rightScrollBarSelector).children().css({
"width":"1px",
"height":($(tbodyTableSelector + " thead").height() + $(tbodyTableSelector + " tbody").height())+"px",
"overflow-y":"auto"
});
var flag1 = false;
var flag2 = false;
$(rightScrollBarSelector).scroll(function(){
if(!flag2){
flag1 = true;
$(tbodyTableSelector)[0].scrollTop = $(rightScrollBarSelector)[0].scrollTop;
}else{
flag2 = false;
}
});
$(tbodyTableSelector).scroll(function(){
if(!flag1){
flag2 = true;
$(rightScrollBarSelector)[0].scrollTop = $(tbodyTableSelector)[0].scrollTop;
}else{
flag1 = false;
}
});
}
initScrollBar("#main", "#bg1", "#bg2", "#table2", "#table1", 480, 350);
</script>
</body>
</html>
核心标签结构示意图： 
效果图：  | 
转播
