table の縦横スクロール

table の tbody による縦スクロールは簡単であるが、縦横スクロールで左端の列をヘッダとして横スクロール、
しかし縦スクロールで、左端列もスクロールとなるといきなり難しくなる。
いろんな方法があるようだが、tableの代わりに div で表を組むとスタイルシートのサイズが増えるし、
やはり、ヘッダ部、横に配置するサイド部、コンテンツを別々の tableで組むしかなさそう。

以下の画面キャプチャのようにする table は、、

============= スタイルシート ==================
<style type="text/css">
.scroll-head td{
   border-left: 1px #000000 solid;
   border-right: 1px #000000 solid;
   padding: 4px;
   width: 200px;                      /* 1 cell width  */
}
.scroll-content td{
   border: 1px #000000 solid;
   padding: 4px;
   width: 200px;                      /* 1 cell width  */
}
.scroll-side td{
   border-top: 1px #000000 solid;
   border-bottom: 1px #000000 solid;
   padding: 4px;
}
div#target_content_div{
   overflow: scroll;
   width: 600px;       /* コンテンツスクロール width  */
   height: 300px;      /* コンテンツスクロール height */
   position:relative;
}
div#target_head_div{
   overflow:hidden;
   width: 584px;       /* コンテンツスクロール width - 16px */
}
div#target_side_div{
   overflow: hidden;
   height: 284px;      /* コンテンツスクロール height - 16px */
}
table{
   border-collapse: collapse;
   border-spacing: 0;
   white-space: nowrap;
}
table.scroll-frame{
   border: 1px #000000 solid;
   background-color: #e0e0e0;
}
table.scroll-head{
   width: 4000px;                     /* 1 cell width * 列数 */
   background-color: #add8e6;
}
table.scroll-content{
   width: 4000px;                     /* 1 cell width * 列数 */
   background-color: #ffffff;
}
table.scroll-side{
   width: 160px;                      /* 左端固定列の width */
   background-color: #ffb6c1;
}
</style>
============= jQuery =========================
==== サンプル用データ書き込みとスクロール
================================================
<script type="text/javascript" src="js/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
$(function(){
   // header 書込み
   for(var i=1;i <= 20;i++){
      $('#target_head_tr').append("<td>"+"Title - "+i+"</td>");
   }
   // side 書込み
   for(var i=1;i <= 40;i++){
      $('#target_side_table').append("<tr><td>"+"Row - "+i+"</td></tr>");
   }
   // content 書込み
   for(var i=1;i <= 40;i++){
      var row = "<tr>";
      for(var n=1;n <= 20;n++){
         row += ("<td>"+"["+i+" : "+n+"]"+"</td>");
      }
      row += "</tr>";
      $('#target_content').append(row);
   }
   /* スクロール関数定義  */
   fnScroll=function(){
      $('#target_head_div').scrollLeft($('#target_content_div').scrollLeft());
      $('#target_side_div').scrollTop($('#target_content_div').scrollTop());
   }
});
</script>

=============== ＨＴＭＬ部分 ===================
<table class="scroll-frame">
   <tr>
      <td></td>
      <td>
         <div id="target_head_div">
            <table class="scroll-head">
               <tr id="target_head_tr">
               </tr>
            </table>
         </div>
      </td>
   </tr>
   <tr>
      <td valign="top">
         <div id="target_side_div">
            <table id="target_side_table" class="scroll-side">
            </table>
         </div>
      </td>
      <td valign="top">
         <div id="target_content_div" onscroll="fnScroll()" >
            <table id="target_content" class="scroll-content">
            </table>
         </div>
      </td>
   </tr>
</table>
=====================================================

こういう Ｗｅｂページを作るシステムの要件定義もどうかと思うが、、
嫌々作るしかないみたい。