JavaScript 常にヘッダーが表示されるテーブル。
function header_resize(){ document.getElementById('header').style.width = document.getElementById('data').offsetWidth; } <table id="header" border="1" width="100px"> <tr> <th with="10%">1</th> <th with="20%">2</th> <th with="30%">3</th> <th with="40%">4</th> </tr> </table> <div style="width:100px;height:100px;overflow-y:scroll;"> <table border="1" id="data" width="100%"> <tr> <td with="10%">1</td> <td with="20%">2</td> <td with="30%">3</td> <td with="40%">4</td> </tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> <tr><td>1</td><td>2</td><td>3</td><td>4</td></tr> </table> </div>
ヘッダーとデータの二つのテーブルを作成し、onloadやonresizeイベント時にheader_resize()関数を実行する。IE6とFirefoxで動作するのを確認。両方のテーブルにボーダー属性を設定するとその境目で重複してしまうので、スタイルシートで重複しないようにすると綺麗に表示される。