CSSでテーブルのヘッダーを固定する方法！position: stickyで快適なスクロールを実現しよう

テーブルのヘッダーを固定するスタイル例（position: sticky）

先生と生徒の会話形式で理解しよう

生徒

「Webサイトで長い表を見ると、下にスクロールした時に一番上の見出しが消えてしまい、何の値かわからなくなって困ります。ヘッダーを固定することはできますか？」

先生

「CSSのposition: stickyという機能を使うと、スクロールしても見出しを画面の上部にピタッと張り付かせて固定することができますよ。」

生徒

「それは便利ですね！具体的にどのように設定するのですか？」

先生

「それでは、初心者の方でもすぐに使える基本的な設定手順を見ていきましょう！」

1. position: stickyとは何か

position: stickyとは、CSSを使って要素を「ある条件で固定する」ための命令です。これを使うと、最初は通常の流れの中にいますが、指定した位置までスクロールしたときに、その場所に固定されるという動きを作れます。テーブルのヘッダーに適用すれば、どれだけ下の行まで移動しても、見出しが常に目の前にある状態を維持できます。プログラミングの複雑な計算は不要で、CSSの数行を書くだけで実装できるため、Webサイト制作において非常に人気のある手法です。

2. テーブルヘッダーを固定するための基本CSS

テーブルのヘッダー（thタグ）を固定するには、対象のth要素に対してposition: stickyを指定し、top: 0と書き加えます。top: 0は「上端から0の位置に固定する」という意味です。


<style>
    .sticky-table {
        border-collapse: collapse;
        width: 100%;
    }
    .sticky-table th {
        position: sticky;
        top: 0;
        background-color: #007bff;
        color: white;
        padding: 10px;
    }
</style>

<table class="sticky-table">
    <thead>
        <tr>
            <th>項目名A</th>
            <th>項目名B</th>
        </tr>
    </thead>
    <tbody>
        <tr><td>データ1</td><td>データ2</td></tr>
    </tbody>
</table>

ブラウザ表示

3. スクロール領域を制限する方法

画面全体ではなく、表の中だけをスクロールさせたい場合もあります。その際は、表を囲う親要素に高さ（height）を指定し、overflow-y: autoを設定します。これにより、表の枠内で内容だけが動き、ヘッダーはその枠の上部に固定されるようになります。ダッシュボードや管理画面など、限られたスペースに大量のデータを表示する場合に非常に有効なテクニックです。


<style>
    .scroll-container {
        height: 150px;
        overflow-y: auto;
    }
    .scroll-container th {
        position: sticky;
        top: 0;
        background-color: #333;
        color: #fff;
    }
</style>

<div class="scroll-container">
    <table>
        <thead>
            <tr><th>日付</th><th>売上</th></tr>
        </thead>
        <tbody>
            <tr><td>2026/06/01</td><td>1000</td></tr>
            <tr><td>2026/06/02</td><td>2000</td></tr>
            <tr><td>2026/06/03</td><td>3000</td></tr>
        </tbody>
    </table>
</div>

ブラウザ表示

4. なぜ背景色の指定が必要なのか

stickyを設定するとき、背景色を必ず指定しなければならない理由があります。実は、position: stickyで固定された要素は背景が透明のままだと、下の行のテキストが透けて見えてしまい、非常に読みづらくなります。背景色を指定することで、下の行を隠しながらきれいに固定されるようになります。これは初心者の方が見落としがちなポイントですので、必ず背景色を設定するように意識しましょう。


<style>
    th {
        position: sticky;
        top: 0;
        background-color: white; /* これを忘れない */
        border-bottom: 2px solid #ddd;
    }
</style>

<table>
    <tr><th>見出し</th></tr>
    <tr><td>下の行が透けない設定です</td></tr>
</table>

ブラウザ表示

5. スマホで見やすくするレスポンシブ対応

スマートフォンで表を見る際、画面幅が狭くて表が崩れることがあります。これに対応するには、親要素にスクロール機能を持たせることが基本です。stickyと組み合わせて使うことで、スマホユーザーにとってもストレスのない情報閲覧体験を提供できます。Webデザインにおいて、「ユーザーがいかに情報を探しやすくするか」という視点はSEOの観点からも重要です。見やすい表はユーザーのサイト滞在時間を延ばします。

6. ブラウザの対応状況を確認する

現在、主要なブラウザのほとんどがposition: stickyに対応しています。古いInternet Explorerなどは非対応ですが、現代のWeb環境ではほぼ無視して問題ありません。初心者の方が学習を始める際、ブラウザの対応をあまり過度に心配する必要はありません。まずはChromeなどのモダンブラウザで正しく表示されることを確認し、徐々に複雑なレイアウトに挑戦していくのが上達の近道です。


<style>
    .card-header {
        position: sticky;
        top: 10px;
        background-color: #f8f9fa;
        padding: 5px;
    }
</style>

<div class="card-header">
    <strong>固定される見出しエリア</strong>
</div>
<p>ここに長い文章が続きます。<br>スクロールすると見出しがついてきます。</p>

ブラウザ表示

7. Webデザインの効率化とSEO効果

情報量が多いサイトほど、こうした細やかなUI（ユーザーインターフェース）の工夫が差を生みます。ユーザーが何を見ているか直感的にわかるサイトは、検索エンジンからも好まれます。position: stickyは、たった数行のCSSで実装できるため、サイトの読み込み速度にもほとんど影響を与えません。快適なサイト運営のために、ぜひ今日から取り入れてみてください。パソコン操作が苦手な方でも、コピペから始めればすぐにサイトをかっこよく変えられますよ。

2026年最新スキルアップ・実践セミナー