縦にも横にもスクロール可能な一覧表

ブラウザを最大の状態にしても表示しきれない情報量だけど、コンテンツ全体をスクロールさせたくない。という場合の対処例ですな。

<div id="listHeader" style="width:284px;overflow:hidden;">
<table width="600px">
 <tr>
  <th>項目１</th>
  <th>項目２</th>
  <th>項目３</th>
  <th>項目４</th>
  <th>項目５</th>
 </tr>
</table>
</div>
<div id="listBody" style="width:300px;height:300px;overflow:scroll;" onscroll="scrollHeader();">
<table width="600px">
 <tr>
  <td>aaaaaa</td>
  <td>bbbbbb</td>
  <td>cccccc</td>
  <td>dddddd</td>
  <td>eeeeee</td>
 </tr>
 :
 :
 :
</table>
</div>

2009/10/28追記

肝心のスクリプト部分をHTMLコメントで括っていたら表示されていなかったのに気付いた(汗)ので、外出し追記。

// 一覧の明細部横スクロールに同期して、項目ヘッダ部をスクロールさせる
function scrollHeader() {
 var left = document.all.listBody.scrollLeft;
 document.all.listHeader.scrollLeft = left;
}