<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="http://172.20.15.8/jquery-latest.min.js"></script>
<title>Title</title>
<style>
.table{
border: black solid thin;
height: 20px;
overflow: scroll;
border-collapse: collapse;
}
.tr1{
background-color: orange;
}
.thead{
}
.tbody{
height: 20px;
overflow: scroll;
}
.div2{
overflow: scroll;
}
.td{
overflow: hidden;
width: 300px;
background-color: gray;
}
</style>
</head>
<body>
<table class=table id='table1'>
<tr>
<td class='td'>Test1aaaaaaaaaa</td>
<td class='td'>Test2bbbbbbbbbb</td>
</tr>
</table>
<div class=div2 id=div2>
<table class='table'>
<tbody class=tbody>
<tr>
<td>Test3</td>
<td>Test4</td>
<tr>
<td>Test3</td>
<td>Test4</td>
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
<tr>
<td>Test3
<td>Test4
</tr>
</tbody>
</table>
</div>
<div id='log'> </div>
<script>
$("td").width("130px");
var offset=50;
var frame = document.getElementById("div2");
var table1 = document.getElementById("table1");
var windowheight = window.innerHeight-offset;
frame.style.height = windowheight + "px";
var w = table1.offsetWidth+20
frame.style.width = w + "px";
//frame.style.width = "200px";
document.getElementById("log").innerHTML=w + " Test";
</script>
</body>
</html>