- 締切済み
tableのヘッダを固定したい
IE6,7,8でテーブルのヘッダを固定したいのですが うまくいきません。 条件は以下のとおりです。 ・width: ?%として大きさを可変にする。 ・ヘッダを固定する。 ・ボディにはスクロールバーをつける これまでwidthは固定で作成してきたのですが 可変にする場合どのようなcssにすればよいのでしょうか。 よろしくお願いします。 <div id="container"> <div class="headerTable"> <table border="1" cellspacing="0" cellpadding="0"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> <th>え</th> </tr> </thead> </table> </div> <div class="bodyTable"> <table border="1" cellspacing="0" cellpadding="0" width="100%"> <thead> </thead> <tbody> <tr> <td>あaaaaaa</td> <td>い</td> <td>う</td> <td>え</td> </tr> </tbody> </table> </div> </div>
- poppo002544
- お礼率17% (3/17)
- HTML
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
<thead>と<tbody>はひとつの<table>要素内に書かないとダメです。 そもそも11.2.1 TABLE要素 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/tables.html#h-11.2.1 )にあるように <!ELEMENT TABLE - - (CAPTION?, (COL*|COLGROUP*), THEAD?, TFOOT?, TBODY+)> とあるように、 CAPTION ? ひとつかゼロ個 (COL または COLGROUP はゼロ個以上 THEAD ? ひとつかゼロ個 TFOOT ? ひとつかゼロ個 TBODY + 一個以上必須 と書かれています。 tableのヘッダ部分を固定するのは以前に テーブルをスクロールさせるときのスクロールの位置 - HTML - 教えて！goo ( http://okwave.jp/qa/q7105490.html ) で検討しましたが、とても難しいです。上記を読めば概略はわかるかと思います。
補足
widthに値を設定するやり方は豊富なサンプルがあるのですが widthに%を指定して可変にするサンプルは中々見つけることができません。 恐らく私が見つけれないだけだとは思うのですが・・・ 以下は、widthに値を設定しているサンプルを%にしてみたものです。 やはりうまくいきません。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift-JIS" /> <title>Pushpin Header test</title> <style type="text/css"> /* ---------- キモになる部分＋枠線 ---------- */ /* 全体の枠。ヘッダが入る分だけ上部を空けておく */ .container { position: relative; padding-top: 20px; width: 100%; } /* .container からヘッダのスペースを除いた部分。ここがスクロール対象 */ .content { overflow: auto; } /* ヘッダ部分。位置を .container の左上端に移動 */ .scrollable thead tr { position: absolute; top: 0; left: 0; } /* このheightと .container の padding-top を合わせる */ .scrollable thead th { height: 20px; border: 1px solid red; } .scrollable tbody td { height: 20px; border: 1px solid red; } /* ---------- 表ごとに異なる値はclassを分ける ---------- */ .content1 { width: 100%; height: 80px; } /* 各カラムにはwidth を設定する必要がある */ .table1 th, .table1 td { padding: 0 3px 0 3px; width: 15%; } .table1 { width: 100%; border-collapse: collapse; } </style> </head> <body> <!-- 全体枠 --> <div class="container container1"> <!-- スクロール領域 --> <div class="content content1"> <table class="scrollable table1"> <thead> <tr> <th>あ</th> <th>い</th> <th>う</th> </tr> </thead> <tbody> <tr> <td>aaa</td> <td>b</td> <td>a</td> <td>a</td> </tr> <tr> <td>aaa</td> <td>b</td> <td>a</td> <td>a</td> </tr> <tr> <td>aaa</td> <td>b</td> <td>a</td> <td>a</td> </tr> <tr> <td>aaa</td> <td>b</td> <td>a</td> <td>a</td> </tr> <tr> <td>aaa</td> <td>b</td> <td>a</td> <td>a</td> </tr> </tbody> </table> </div> </div> </body> </html>