- 締切済み
CSS+HTMLでTBODYスクロールさせたい
「複数行の見出し行（THEAD）で複数行のデータ行（TBODY）をスクロールさせたい」 こんにちわ、HTML+CSSでご質問させていただきます。 ターゲットは、IE7、IE8、IE9です。 http://javascript123.seesaa.net/article/303954410.html を参考に、見出し行固定、のデータスクロールテーブルを cssを使って実現しようと思ってます。 上記URLのサンプルソースをそのままコピーして、 HTMLとして動かすと期待どおりの動きをいたします。 そのサンプルソースの見出し行を複数行にしたく、 以下のように修正いたしましたが、 見出し行２行のうちの１行分しか表示されません。 下記の様になります。 http://apooz.obata.tk/test.html 変更した箇所はtbodyの開始位置をヘッダーの高さ倍にしたかったので、 out_Div内のpadding-topを修正。 あとは、”調査時期”というカラムをTHEADとTBODYに増やしました。 <tr> <th class="coL0" colspan="5">調査時期</th> </tr> 試行錯誤いろいろしましたが、着眼点が悪かったのか、 スキル不足も手伝って、時間ばかり消化しております。 何かヒントなる情報いただけると幸いです。 宜しくお願い致します。 ------------------ソース ここから------------------ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>CSS でヘッダ固定、データ行を スクロールさせるテーブル。</title> <style type="text/css"> <!-- #sclTbl { /* スクロール対象のテーブル */ background-color: #fff; /* テーブルの背景色 borderの色になる */ border-collapse:separate; /* 枠線の表示の仕方 */ font-size: 16px;/* 文字のサイズ */ } #out_Div { /* 全体の枠。ここにヘッダを格納 */ position: relative; /* 相対位置 */ padding-top: 52px; /* #in_Div の開始位置 */ width: 480px; /* 列幅の合計＋セル間の幅(2px)の合計＋20px 程度 */ border: 1px solid #0099cc; /* 外枠 */ background-color: #fff; /* 白 */ } #in_Div {/* tbodyが入っている。ここがスクロール対象*/ overflow: auto; /* スクロールバー*/ height: 133px; /* tbodyを表示する高さ */ } #sclTbl thead tr {/* ヘッダ 見出し行,位置を #out_Div の左上端に移動 */ position: absolute; /* 絶対位置 */ top: 0px; /* 上からの位置 */ left: 0px; /* 左からの位置 */ background-color: #fff; } #sclTbl thead tr th{/* thead 'th'のスタイル */ background-color: #0099cc; /* 背景色 */ color: #fff; /* 文字色 */ padding: 3px 0px; } #sclTbl tbody tr td{/* tbody 'td'のスタイル */ background-color: #dcdcdd; color: blue; padding: 3px 6px; } .coL0 { width: 30px; }/* colgroupの列幅指定 */ .coL1 { width: 100px; } .coL2 { width: 120px; } --> </style> </head> <body> <div id="out_Div"> <div id="in_Div"> <table id="sclTbl"> <!--colgroup tableの列をグループ化し、列幅指定--> <colgroup class="coL0"></colgroup> <colgroup class="coL1"></colgroup> <colgroup class="coL2"></colgroup> <colgroup class="coL1" span="2"></colgroup> <colgroup class="coL3"></colgroup> <thead> <tr> <th class="coL0" colspan="5">調査時期</th> </tr> <tr> <th class="coL0">Ｎo</th> <th class="coL1">都道府県</th> <th class="coL2">県庁所在地</th> <th class="coL1">人口</th> <th class="coL1">面積（ｋm2)</th> </tr> </thead> <tbody> <tr> <td align="center" colspan="5">2011年</td> </tr> <tr> <td>1</td> <td>北海道</td> <td>札幌市</td> <td>5,517,449</td> <td>78,420.61</td> </tr> ： （中略） ： <tr> <td align="center" colspan="5">2011年</td> </tr> <tr> <td>10</td> <td>群馬県</td> <td>前橋市</td> <td>2,006,903</td> <td>6,363.16</td> </tr> </tbody> </table> </div> </div> </body> </html> ------------------ソースここまで------------------ 大変困ってます。助けてください。m(_ _)m
- kenchandane
- お礼率0% (0/1)
- HTML
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
IEとの事ですが、 ⇒テーブルをスクロールさせるときのスクロールの位置 - HTML - 教えて！goo( http://okwave.jp/qa/q7105490.html ) で散々悩みましたが、結局あきらめました。 リストでマークアップして、表形式に纏め上げるほうが楽です。 上記リンクをよく読んでください。
補足
回答ありがとうございます。 他者様からの回答指摘で原因が判明いたしました。 以下のCSS部分 #sclTbl thead tr { position: absolute; /* 絶対位置 */ top: 0px; /* 上からの位置 */ } trの位置が0になっております。 これにより、 1行目も2行目も位置が同じ０の為、 重なって表示されておりました。 解決方法として、 thead全体の開始位置を top: 26px; /* 上からの位置 */ に変更。 ヘッダ 1行目の見出し行位置を指定するため、以下のようなCSSを追加いたします。 #sclTbl thead tr:first-child {/* ヘッダ 1行目の見出し行,位置 */ top: 0px; /* 上からの位置 */ }