tableのthを固定表示したい。

Question

tableのtheadの部分を固定表示にして、tbodyの部分をスクロールするために、下記のHTMLとCSSを記述しました。

<table class="table">
 <thead class="scrollHead">
   <tr>
    <td colspan="6"></td><td>1年目</td><td>2年目</td><td>3年目</td>…
  </tr>
 </thead>
  <tbody class="scrollBody">
   <tr>
     <td colspan="6"></td><td></td><td></td>…
   </tr>
   …
 </tbody>
</table>

thead.scrollHead,tbody.scrollBody{
	display:block;
}
tbody.scrollBody{
  overflow-y:scroll;
  height:500px;
}

スクロール自体は、うまくいくのですが、
thの部分の<td colspan="6"></td>が無視されて、「1年目」が一番左に来てしまいます。

<td colspan="6"></td>を機能させる方法はないでしょうか。 ご存知の方、ご教示頂ければ幸いです。 よろしくお願いします。

Answer 1

参考情報

• HTML/CSSヘッダー固定のスクロールテーブル http://kagan.hatenablog.com/entry/2014/08/08/071726
• tableの行列のヘッダを固定、データをスクロール http://php.o0o0.jp/article/jquery-grid_table
• Tableのヘッダ固定を行うCSS & JQuery http://webnonotes.com/css/table-header/

Comments

[退会済みユーザー]

ありがとうございます。
参考にさせていただきます。

Answer 2

こんなでしょうか
![完成イメージ図]WIDTH:600

thead.scrollHead,tbody.scrollBody {
	display: block;
}

tbody.scrollBody {
	overflow-y: scroll;
	height: 500px;
}

td,th {
	table-layout: fixed;
	width: 60px;
	height: 4em;
}

tr th:FIRST-CHILD, tr td:FIRST-CHILD {
	width: 360px;
}

<table class="table" border="1">
	<thead class="scrollHead">
		<tr>
			<th></th>
			<th>1年目</th>
			<th>2年目</th>
			<th>3年目</th>
		</tr>
	</thead>
	<tbody class="scrollBody">
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
		<tr><td></td><td></td><td></td><td></td></tr>
	</tbody>
</table>

Comments

[退会済みユーザー]

実際に作成までして頂いて、ありがとうございました。
th部分にwidthを指定することで、解決致しました。

[blackonyx]

Goodです。

Answer 3

tbody内のtd colspan="6"の箇所が閉じられていませんがコピペミスでしょうか？

  <tbody class="scrollBody">
   <tr>
     <td colspan="6"><td></td><td></td><td></td>…
   </tr>
   …
 </tbody>

Comments

[退会済みユーザー]

すみません。それは、コピペミスです。