HTML table でヘッダを固定してスクロールさせる方法は、CSSだけでは無理なので、
JavaScript のライブラリを探してたところ、良いものを見つけました。
http://www.otchy.net/javascript/tablefix/
MITライセンスです。
呼び出し記述例
$('tableSelector').tablefix( { width: 600, height: 400, fixRows: 1, fixCols: 2 } );
引数の意味は、
width テーブル全体の横幅
height テーブル全体の縦の長さ
fixRows テーブル上部で固定するヘッダの行数
fixCols テーブルの左側で固定する列数
<table id="dataview"> に対して、
<script type="text/javascript">
$(function(){
$('<色:#0000ff>#dataview</色>').tablefix( { height: 100, fixRows: 1 } );
});
</script>
のように記述します。
ヘッダ１行のみ固定で
$('#dataview').tablefix( { height: 100, fixRows: 1 } );
の結果の例、（画面キャプチャなのでスクロールしません）
