プログラミング

固定ヘッダーと列のテーブル

最終更新： 22/04/2025
1 分の読み

HTMLのテーブルで、ヘッダーや列を固定するためには、CSSやjQueryを使って視覚的な効果を得ることができます。この記事では、HTMLテーブルにおける固定ヘッダーと列を実装する方法を、jQueryを使用して完全かつ包括的に解説します。

固定ヘッダーと列を作成する理由

HTMLテーブルは、データを整理して表示するために非常に有用です。しかし、長いテーブルになると、スクロールすることでヘッダーや特定の列が見えなくなり、ユーザーがデータを理解しづらくなります。この問題を解決するために、固定ヘッダーや列を作成する方法があります。これにより、スクロールしても常にヘッダーや列が表示され、視覚的に情報を把握しやすくなります。

関連記事

必要な要素

以下の要素を使用して、HTMLテーブルの固定ヘッダーおよび列を作成します。

  1. HTML：テーブルの構造を定義します。

  2. CSS：テーブルのレイアウトとスタイルを定義します。

  3. jQuery：スクロール時にヘッダーや列を固定する動きを実装します。

HTML テーブルの基本構造

まず、基本的なHTMLテーブルを作成します。以下のコードは、固定ヘッダーを持つテーブルの例です。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定ヘッダーと列のテーブルtitle>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
head>
<body>
    <div class="table-container">
        <table id="fixedTable">
            <thead>
                <tr>
                    <th>名前th>
                    <th>年齢th>
                    <th>住所th>
                    <th>電話番号th>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>山田太郎td>
                    <td>25td>
                    <td>東京都td>
                    <td>090-1234-5678td>
                tr>
                <tr>
                    <td>佐藤花子td>
                    <td>30td>
                    <td>大阪府td>
                    <td>080-9876-5432td>
                tr>
                <tr>
                    <td>鈴木一郎td>
                    <td>28td>
                    <td>北海道td>
                    <td>070-1122-3344td>
                tr>
                
            tbody>
        table>
    div>
    <script src="script.js">script>
body>
html>

CSS：テーブルのスタイルを定義

次に、CSSを使ってテーブルのデザインを定義します。ここでは、ヘッダー行とテーブルの全体にスタイルを適用します。

css
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.table-container {
    width: 80%;
    margin: 20px auto;
    overflow: auto;
}

#fixedTable {
    width: 100%;
    border-collapse: collapse;
}

#fixedTable th, #fixedTable td {
    padding: 10px;
    text-align: left;
    border: 1px solid #ddd;
}

#fixedTable th {
    background-color: #f4f4f4;
    position: sticky;
    top: 0;
    z-index: 10;
}

#fixedTable td {
    background-color: #fff;
}

#fixedTable tbody {
    max-height: 300px;
    overflow-y: scroll;
    display: block;
}

このCSSコードでは、ヘッダー行 (th) を固定するために position: sticky を使用しています。また、top: 0 によってヘッダーがページ上部に固定されます。テーブル本体にはスクロール可能な領域を指定して、長いデータでもスクロールできるようにしています。

jQuery：固定列の実装

次に、jQueryを使用して特定の列を固定する方法を解説します。以下のコードは、テーブルの最初の列を固定する方法です。

javascript
$(document).ready(function() {
    var $table = $('#fixedTable');
    var $header = $table.find('thead');
    var $body = $table.find('tbody');

    // 最初の列を固定
    var $firstColumn = $table.find('tr').map(function() {
        return $(this).find('td:first').clone();
    });

    $firstColumn.each(function(index) {
        $(this).css({
            position: 'sticky',
            left: '0',
            backgroundColor: '#f4f4f4',
            zIndex: '5'
        });
    });

    // スクロール時にヘッダーを固定
    $body.scroll(function() {
        var scrollTop = $body.scrollTop();
        $header.css('transform', 'translateY(' + scrollTop + 'px)');
    });
});

このjQueryコードでは、テーブルの最初の列を抽出し、その列を画面上に固定します。さらに、scrollイベントを使って、テーブル本体がスクロールした際にヘッダーが常に上部に留まるようにしています。

完全な例

これで、固定ヘッダーと列を持つテーブルが完成しました。以下が、完全なHTML、CSS、jQueryのコードです。

html
html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>固定ヘッダーと列のテーブルtitle>
    <link rel="stylesheet" href="style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js">script>
head>
<body>
    <div class="table-container">
        <table id="fixedTable">
            <thead>
                <tr>
                    <th>名前th>
                    <th>年齢th>
                    <th>住所th>
                    <th>電話番号th>
                tr>
            thead>
            <tbody>
                <tr>
                    <td>山田太郎td>
                    <td>25td>
                    <td>東京都td>
                    <td>090-1234-5678td>
                tr>
                <tr>
                    <td>佐藤花子td>
                    <td>30td>
                    <td>大阪府td>
                    <td>080-9876-5432td>
                tr>
                <tr>
                    <td>鈴木一郎td>
                    <td>28td>
                    <td>北海道td>
                    <td>070-1122-3344td>
                tr>
                
            tbody>
        table>
    div>
    <script src="script.js">script>
body>
html>

まとめ

この方法を使うことで、HTMLテーブルにおいて、スクロールしても常にヘッダーや列が固定され、データの視認性が向上します。CSSでのposition: stickyプロパティを活用し、jQueryでスクロール時の挙動を制御することで、より高度なインタラクションを実現できます。

最終更新： 22/04/2025
1 分の読み
Back to top button