HTML/CSSヘッダー固定のスクロールテーブル

ヘッダーを固定させたままデータ部だけスクロールさせる方法はいろいろありますが、一番簡単と思われる方法を紹介します。

↓HTML

<table>
  <thead class="scrollHead">
    <tr><th class="no">番号</th><th class="name">お名前</th><th class="address">連絡先</th></tr>
  </thead>
  <tbody class="scrollBody">
    <tr><td class="no">1</td><td class="name">半田</td><td class="address">handa@xxx.com<td></tr>
    <tr><td class="no">2</td><td class="name">野崎くん</td><td class="address">nozaki@xxx.com<td></tr>
    <tr><td class="no">3</td><td class="name">なにゃこ</td><td class="address">nagarekawa@xxx.com<td></tr>
    <tr><td class="no">4</td><td class="name">ゆりか</td><td class="address">rainbow@xxx.com<td></tr>
    <tr><td class="no">5</td><td class="name">るるも</td><td class="address">majimoji@xxx.com<td></tr>
    <tr><td class="no">6</td><td class="name">ヒメくん</td><td class="address">hime@xxx.com<td></tr>
  </tbody>
<table>

↓CSS

/*スクロール用*/
thead.scrollHead,tbody.scrollBody{
  display:block;
}
tbody.scrollBody{
  overflow-y:scroll;
  height:100px;
}

/*幅調整*/
td,th{
  table-layout:fixed;
}
.no{
  width:30px;
}
.name{
  width:50px;
}
.address{
  width:200px;
}

↓実際の表示

番号	お名前	連絡先
1	半田	handa@xxx.com
2	野崎くん	nozaki@xxx.com
3	なにゃこ	nagarekawa@xxx.com
4	ゆりか	rainbow@xxx.com
5	るるも	majimoji@xxx.com
6	ヒメくん	hime@xxx.com

theadとtbodyにちゃんと分けて、それぞれをブロック要素にしてtbodyにはスクロールバーをつけるということです。（ブロック要素じゃないとスクロールバーが付けられない）ただし、このようにクラスでしている通り、colgroupによるwidth設定はできませんのでご注意。