- 締切済み
フレームは使わず項目部分を常に表示させたい
表を作っているのですが、縦に長いのでスクロールすると一番上の項目部分が表示されなくなってしまいます。 フレームではなくjavascriptか何かで項目だけを常に表示させる方法はありますか? 宜しくお願いします。
- みんなの回答 (3)
- 専門家の回答
みんなの回答
- Bo_Bo
- ベストアンサー率65% (97/149)
CSSを用いた、簡単な例。 --------------------------------------------------------------- <html><head><title>TEST</title> <style type="text/css"><!-- body { background-color: #eee; } .headBox { width: 600px; } .recordBox { width: 600px; height: 100px; overflow: auto; } .tblHead { width: 580px; background-color: #ffc; } .tblRecord { width: 580px; background-color: #fff; } --></style> </head><body> <div class="headBox"> <table class="tblHead" border="1" width="580"> <tr><th width="50%">HEAD</th><th width="50%">HEAD</th></tr> </table> </div> <div class="recordBox"> <table class="tblRecord" border="1" width="580"> <tr><td width="50%">RECORD</td><td width="50%">RECORD</td></tr> <tr><td>RECORD</td><td>RECORD</td></tr> <tr><td>RECORD</td><td>RECORD</td></tr> <tr><td>RECORD</td><td>RECORD</td></tr> <tr><td>RECORD</td><td>RECORD</td></tr> <tr><td>RECORD</td> <td>RECORD RECORD RECORD RECORD RECORD RECORD</td></tr> </table> </div> </body></html> --------------------------------------------------------------- 注意事項: ・テーブルの幅は、スクロールバー分を差し引いた幅にする事。 ・項目セルとデータ・セルの幅が一緒になるように、列幅を指定する事。 ・文字サイズやウインドウの大きさを変えて、状態の変化を観察する事。 ・スタイル・シートを無効にした場合でも、データ閲覧が破綻しないように。