scrollableTable
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<style type="text/css">
/*absolute配置の基準*/
#container{
width:410px;
height:200px;
position:relative;
padding-top:50px;
padding-bottom:25px;
overflow:hidden;
border:solid 1px black;
}
/*スクロールバーを表示させる*/
#scroller{
width:410px;
height:200px;
overflow:auto;
}
/*テーブル幅・高さを固定する*/
#fixer{
width:500px;
}
/*スクロール対象のテーブル*/
#scrollee th, td, tr{
border:solid 1px black;
}
#scrollee th{
/* width:100px;
height:75px;
*/ background-color:white;
vertical-align:middle;
text-align:center;
background: #888;
-webkit-box-shadow:0 1px 13px rgba(0,0,0,0.8);
-moz-box-shadow:0 1px 13px rgba(0,0,0,0.8);
box-shadow:0 1px 13px rgba(0,0,0,0.8);
#scrollee td{
/* width:100px;
height:75px;
*/ background-color:white;
vertical-align:middle;
text-align:center;
}
}
/*header*/
#scrollee thead{
/*absoluteを指定し,containerに追い出す.*/
position:absolute;
width:500px;
top:0;
left:0;
z-index:2;
}
#scrollee thead tr th:first-child{
/*block表示を指定し,相対位置指定を有効化する.*/
display:block;
position:relative;
z-index:3;
}
/*body*/
#scroller tbody{
width:500px;
}
#scrollee tbody tr td:first-child{
display:block;
position:relative;
z-index:1;
}
/*footer*/
#scrollee tfoot{
position:absolute;
width:500px;
bottom:0;
left:0;
z-index:2;
}
#scrollee tfoot tr td:first-child{
display:block;
position:relative;
z-index:3;
}
</style>
<script type="text/javascript" charset="UTF-8" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
window.onload = function(){
//イベントを発生させるdiv
var scroller = document.getElementById("scroller");
var thead, theadF, theadL, tbodyF, tbodyL, tfoot, tfootF, tfootL;
init();
//スクロール時の処理
scroller.onscroll = function(){
//scrollerのスクロール位置
var left = scroller.scrollLeft;
var right = 106 - left;
thead.css("left", left * -1);
theadF.css("left", left);
tbodyF.css("left", left);
tfoot.css("left", left * -1)
tfootF.css("left", left);
};
scroller.onscroll();
//行を変化させたらjQeryオブジェクトを再構成.
/*
$("#scrollee tbody").append("<tr><td>A</td><td>B</td><td>C</td><td>D</td><td>E</td></tr>");
init();
*/
//jQueryオブジェクトを取得する.
function init(){
thead = $("#scrollee thead");
theadF = $("#scrollee thead tr th:first-child");
tbodyF = $("#scrollee tbody tr td:first-child");
tfoot = $("#scrollee tfoot");
tfootF = $("#scrollee tfoot tr td:first-child");
}
};
</script>
<title>scrollableTable</title>
</head>
<body>
<h1>scrollableTable</h1>
<div id="container"><!--absolute表示する際の基準-->
<div id="scroller"><!--スクロールバーを表示する-->
<div id="fixer"><!--tableの幅を固定する-->
<table id="scrollee">
<colgroup>
<col width="40">
<col width="50">
<col width="100">
<col width="150">
<col width="100">
<col width="100">
</colgroup>
<thead>
<tr>
<th>No.</th>
<th>H1</th><th colspan=2>H2</th><th>H4</th><th>H5</th>
</tr>
<tr>
<th width=24> </th>
<th width=50>H1</th><th width=100>H2</th><th width=150>H3</th><th width=100>H4</th><th width=100>H5</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>11</td><td>12</td><td>13</td><td>14</td><td>15</td>
</tr>
<tr>
<td>2</td>
<td><input type=text value=11 style="width:40px;"></td>
<td><input type=text value=12 style="width:75px"></td>
<td><input type=text value=13 style="width:110px"></td>
<td><input type=text value=14 style="width:75px"></td>
<td><input type=text value=15 style="width:75px"></td>
</tr>
<tr>
<td>3</td>
<td><input type=text value=11 style="width:40px;"></td>
<td><input type=text value=12 style="width:75px"></td>
<td><input type=text value=13 style="width:110px"></td>
<td><input type=text value=14 style="width:75px"></td>
<td><input type=text value=15 style="width:75px"></td>
</tr>
<tr>
<td>4</td>
<td><input type=text value=11 style="width:40px;"></td>
<td><input type=text value=12 style="width:75px"></td>
<td><input type=text value=13 style="width:110px"></td>
<td><input type=text value=14 style="width:75px"></td>
<td><input type=text value=15 style="width:75px"></td>
</tr>
<tr>
<td>5</td>
<td><input type=text value=11 style="width:40px;"></td>
<td><input type=text value=12 style="width:75px"></td>
<td><input type=text value=13 style="width:110px"></td>
<td><input type=text value=14 style="width:75px"></td>
<td><input type=text value=15 style="width:75px"></td>
</tr>
<tr>
<td>6</td>
<td><input type=text value=11 style="width:40px;"></td>
<td><input type=text value=12 style="width:75px"></td>
<td><input type=text value=13 style="width:110px"></td>
<td><input type=text value=14 style="width:75px"></td>
<td><input type=text value=15 style="width:75px"></td>
</tr>
<tr>
<td>7</td>
<td><input type=text value=11 style="width:40px;"></td>
<td><input type=text value=12 style="width:75px"></td>
<td><input type=text value=13 style="width:110px"></td>
<td><input type=text value=14 style="width:75px"></td>
<td><input type=text value=15 style="width:75px"></td>
</tr>
<tr>
<td>8</td>
<td><input type=text value=11 style="width:40px;"></td>
<td><input type=text value=12 style="width:75px"></td>
<td><input type=text value=13 style="width:110px"></td>
<td><input type=text value=14 style="width:75px"></td>
<td><input type=text value=15 style="width:75px"></td>
</tr>
<tr>
<td>9</td>
<td><input type=text value=11 style="width:40px;"></td>
<td><input type=text value=12 style="width:75px"></td>
<td><input type=text value=13 style="width:110px"></td>
<td><input type=text value=14 style="width:75px"></td>
<td><input type=text value=15 style="width:75px"></td>
</tr>
<tr>
<td>10</td>
<td><input type=text value=11 style="width:40px;"></td>
<td><input type=text value=12 style="width:75px"></td>
<td><input type=text value=13 style="width:110px"></td>
<td><input type=text value=14 style="width:75px"></td>
<td><input type=text value=15 style="width:75px"></td>
</tr>
</tbody>
<tfoot>
<tr>
<td width=24>計</th>
<td width=50>F1</td><td width=100>F2</td><td width=150>F3</td><td width=100>F4</td><td width=100>F5</td>
</tr>
</tfoot>
</table>
</div>
</div>
</div>
</body>
</html>