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
補足
ありがとうございます。 検証してみました。 jquery borderを含めている。 左右とで+2となるようです。 開発者ツール border cellpaddingを含めている。 paddingの左右と、borderの左右の値が加算されるようです。 大変勉強になります。