CSSでヘッダを固定したスクロールテーブルを作る方法

CSSでヘッダを固定したスクロールテーブルを作る方法

Posted at March 10,2015 12:55 AM
Tag:[css]

CSSでヘッダを固定したスクロールテーブルを作る方法を紹介します。

CSSでヘッダを固定したスクロールテーブル

1.はじめに

次のようなHTMLでテーブルを作成しました。

<style>
table {
    border-collapse: collapse;
    border-spacing: 0;
}
th {
    background-color: #ccc;
}
th, td {
    border: 1px solid #666;
    padding: 5px;
}
.key, .value {
    width: 100px;
}
</style>
<table>
  <thead>
    <tr><th class="key">キー</th><th class="value">値</th></tr>
  </thead>
  <tbody>
    <tr><td class="key">1</td><td class="value">aaa</td></tr>
    <tr><td class="key">2</td><td class="value">bbb</td></tr>
    <tr><td class="key">3</td><td class="value">ccc</td></tr>
    <tr><td class="key">4</td><td class="value">ddd</td></tr>
    <tr><td class="key">5</td><td class="value">eee</td></tr>
    <tr><td class="key">6</td><td class="value">fff</td></tr>
    <tr><td class="key">7</td><td class="value">ggg</td></tr>
    <tr><td class="key">8</td><td class="value">hhh</td></tr>
    <tr><td class="key">9</td><td class="value">iii</td></tr>
    <tr><td class="key">10</td><td class="value">jjj</td></tr>
  </tbody>
<table>

表示例
表示例

このテーブルのヘッダだけを固定してスクロール可能なテーブルにしたいのですが方法が分かりません。

2.ヘッダを固定したスクロールテーブルを作る

ヘッダを固定したスクロールテーブルを作るには、1項に下記のプロパティを追加すればOKです。

thead, tbody {
    display: block;
}
tbody {
    overflow-y: scroll;
    height: 150px;
}

theadとtbodyにdisplayプロパティ、tbodyにoverflow-yとheightプロパティを設定します。

表示例
表示例

tbodyのheightプロパティで、表示したいテーブルの高さを指定します。

領域からはみだした部分がスクロール対象になります。

「overflow-y: auto」を設定すると次のようにスクロールバーがテーブルの中に入り込んでしまうので注意してください。

「overflow-y: auto」を設定

またセル幅を指定しないとtheadとtbodyでズレが生じるので、こちらも注意してください。

関連記事
zenback
人気エントリー
トラックバックURL


コメントする
greeting

*必須

*必須(非表示)


ご質問のコメントの回答については、内容あるいは多忙の場合、1週間以上かかる場合があります。また、すべてのご質問にはお答えできない可能性があります。予めご了承ください。

太字イタリックアンダーラインハイパーリンク引用
[サインインしない場合はここにCAPTCHAを表示します]

コメント投稿後にScript Errorや500エラーが表示された場合は、すぐに再送信せず、ブラウザの「戻る」ボタンで一旦エントリーのページに戻り(プレビュー画面で投稿した場合は、投稿内容をマウスコピーしてからエントリーのページに戻り)、ブラウザをリロードして投稿コメントが反映されていることを確認してください。

コメント欄に(X)HTMLタグやMTタグを記述される場合、「<」は「&lt;」、「>」は「&gt;」と入力してください。例えば「<$MTBlogURL$>」は「&lt;$MTBlogURL$&gt;」となります(全て半角文字)