tableをレスポンシブ対応させるjQueryプラグイン「resTables」

    • このページをはてなブックマークに追加

    公開日:2018年01月23日 最終更新日:2019年09月26日

    jQueryプラグインの「resTables」を使って、テーブルレイアウトをレスポンシブ対応させる方法について解説します。tableをレスポンシブ対応させる方法には、CSSのみで実現する方法、jQueryプラグインとCSSを組み合わせた方法などがあります。
    CSSのみでレスポンシブテーブルを実現する方法については、「レスポンシブ対応のtableを作成しよう!」をご参考下さい。
    また、HTML tableの作成方法や、CSSでテーブルスタイルを指定する方法などについては、以下の関連記事をご参考下さい。

    目次

    1. 「resTables」プラグインをダウンロードする

    1.1. 作者のページからjQueryプラグインをダウンロードする

    まずは、tableのレスポンシブ対応用のプラグイン「resTables」を作者のサイトからダウンロードしてみましょう。

    「resTables」作者のサイト:https://codefog.github.io/restables/

    ●resTables

    Windows系のOS(サーバー)で使う場合は、真ん中の「Download .zip」をクリックして「resTables」プラグインの圧縮ファイルをダウンロードします。「GitHub」を使ってダウンロードする場合は、「View on GitHub」をクリックして下さい。

    ●resTablesのダウンロード

    Githubのダウンロードサイトに移動しますので、ページ中央右側の「Clone or download」をクリックし、「Download ZIP」を選択します。圧縮ファイル(codefog-restables-1.1.0-0-g5190525.zip)をPCの任意の場所に保存して下さい。

    ▲ページトップへ戻る

    1.2. 「resTables」プラグインの使える環境を整える

    1.2.1. 圧縮ファイル(codefog-restables-1.1.0-0-g5190525.zip)を解凍する

    次に、jQueryプラグインを使う環境をPC上に作成しましょう。本コラムでは、ローカルPC上に環境を作成していきます。先ほどダウンロードした圧縮ファイル(codefog-restables-1.1.0-0-g5190525.zip)を解凍します。

    ●圧縮ファイル(codefog-restables-1.1.0-0-g5190525.zip)の解凍

    ZIPファイルを右クリックし、メニューから「すべて展開」を選択します。任意のフォルダーを解凍先に指定すると「codefog-restables-1.1.0-0-g5190525」フォルダー直下の「codefog-restables-5190525」フォルダー内にJavaScriptファイルや「README」ファイルなど、レスポンシブ対応用のファイルが展開されます。

    ●「codefog-restables-5190525」フォルダー

    ▲ページトップへ戻る

    1.2.2. Webサイト用のフォルダーにプラグイン関連ファイルをコピーする

    ローカルPC上に、Webサイト作成用の「www」フォルダーを作成します。フォルダー内にプラグイン関連ファイルをコピーします。

    ●Webサイト用のwwwフォルダー

    本コラムでは、Webサイト用のファイルを保存する「www」フォルダーの直下に、jQueryファイルを保存する「js」フォルダーを作成します。

    ●「codefog-restables-5190525」フォルダー

    ●「www\js」フォルダー

    「codefog-restables-5190525」フォルダー直下にある「restables.min.js」ファイルを「www\js」フォルダーにコピーしで下さい。 「www」フォルダー内の構成は以下の通りです。

    ・「www\js\restables.min.js」
    ・「www\HTMLファイル」

    次の章で、レスポンシブテーブルの元となるテーブルを表示するHTMLファイルを作成した後に、「resTables」プラグインを適用していきます。

    ▲ページトップへ戻る

    2. レスポンシブ対応用の基本テーブルを作成する

    「www」フォルダー直下に、レスポンシブ対応前の基本となるテーブルを作成します。以下のコードをコピーして、ファイル名を「responsive-table1.html」で保存して下さい。ファイルの保存形式は「utf-8」にします。

    ●responsive-table1.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>レスポンシブテーブル</title>
    <style>
    table, th, tr, td{
    border-collapse: collapse; /* 境界線を重ねて表示する */
    border: 2px solid #666; /* 境界線を実線で指定する */
    }
    </style>
    </head>
    <body>
    <h1>レスポンシブテーブルデザイン</h1>

    <table>
    <thead>
    <tr>
    <th>ID</th>
    <th>姓</th>
    <th>名</th>
    <th>姓(カナ)</th>
    <th>名(カナ)</th>
    <th>年齢</th>
    <th>住所</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>001</td>
    <td>山田</td>
    <td>太郎</td>
    <td>ヤマダ</td>
    <td>タロウ</td>
    <td>25</td>
    <td>東京</td>
    </tr>
    <tr>
    <td>002</td>
    <td>山田</td>
    <td>花子</td>
    <td>ヤマダ</td>
    <td>ハナコ</td>
    <td>20</td>
    <td>東京</td>
    </tr>
    <tr>
    <td>003</td>
    <td>佐藤</td>
    <td>健一</td>
    <td>サトウ</td>
    <td>ケンイチ</td>
    <td>35</td>
    <td>大阪</td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>

    1行目が見出し行で、7列のテーブルを作成しました。CSSで罫線の指定をしていますが、レスポンシブ対応用のCSSなどはまだ記述していません。この状態でブラウザーのサイズを小さくしてもレスポンシブ対応用のレイアウトにはなりません。このテーブルにCSSとJavaScriptを追加し、レスポンシブ対応用のテーブルを作成します。

    ●「responsive-table1.html」

    ▲ページトップへ戻る

    3. 「resTables」プラグインを使ってレスポンシブ対応のテーブルを作成する

    作成したHTMLファイルに、レスポンシブ対応のコードを追加していきましょう。
    「resTables」プラグインを使うと、一行ごとのデーターがまとまって縦並びで表示されます。

    まずは、ブラウザーの幅を小さくした時のスタイルを指定するCSSを記述します。

    ●responsive-table1.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>レスポンシブテーブル</title>
    <style>
    table, th, tr, td{
    border-collapse: collapse; /* 境界線を重ねて表示する */
    border: 2px solid #666; /* 境界線を実線で指定する */
    }
    table.restables-clone {
    display: none;
    }
    table.restables-clone tr:first-child td {
    background: #f3f6fa;
    }
    @media (max-width: 480px) {
    table.restables-origin {
    display: none;
    }
    table.restables-clone {
    display: table;
    }
    }
    </style>
    </head>
    <body>
    <h1>レスポンシブテーブルデザイン</h1>
    ・・・省略・・・
    </tbody>
    </table>
    </body>
    </html>

    「table.restables-clone」セレクタ、「table.restables-clone tr:first-child td」セレクタ、に加えてメディアクエリ「@media (max-width: 480px)」を追加して下さい。
    通常CSSは別ファイルで保存して適用しますが、本コラムでは、なるべく一つのファイルで説明できるように、<style>タグ内にCSSを記述しています。

    ●responsive-table1.html

    <!DOCTYPE html>
    <html lang="ja">
    <head>
    <meta charset="utf-8">
    <title>レスポンシブテーブル</title>
    <style>
    table, th, tr, td{
    border-collapse: collapse; /* 境界線を重ねて表示する */
    border: 2px solid #666; /* 境界線を実線で指定する */
    }
    ・・・省略・・・
    </style>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/restables.min.js"></script>

    <script type="text/javascript">
    $(document).ready(function () {
    $('table').resTables();
    });
    </script>
    </head>
    <body>
    <h1>レスポンシブテーブルデザイン</h1>
    ・・・省略・・・
    </tbody>
    </table>

    </body>
    </html>

    次に、<style>タグの下に、jqueryプラグインの「js/restables.min.js」とGoogleが提供しているjQueryファイルの「jquery.min.js」を追加します。
    <script>タグでは、HTMLドキュメントの読み込みが完了した後に、「resTables」プラグインを実行する処理が記述されています。

    ●レスポンシブ対応後の「responsive-table1.html」のテーブル表示

    「responsive-table1.html」ファイルを保存し、動作を確認してみましょう。ブラウザーの幅を小さくすると、1列目の見出しである「ID」と最初データの「001」が見出し行として表示され、背景色も変わっています。2列目以降のデーターは、その下の行にまとめて配置され、次の項目である「002」のデータ、「003」のデータというように縦にまとまって配置されるようにレイアウトが変更されました。

    ▲ページトップへ戻る

    関連記事:「HTML入門【<table>タグ】~テーブル(表)を作成してみよう~
    関連記事:「CSSでテーブル(表)をデザインする方法【基礎編】
    関連記事:CSSでテーブル(表)をデザインする方法【応用編】
    関連記事:CSSでシンプルなテーブルをデザインする
    関連記事:tableをレスポンシブ対応させるjQueryプラグイン「Basic Table」

    jQueryのスキルが活かせる最新求人情報をチェック!

    月額単価60万円〜
    勤務地 東京都 渋谷区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    正社員

    【Java】プログラマー|WEBアプリケーションの開発

    年収 :300万円〜600万円

    弊社で支援しているWEBアプリケーションの開発をご担当いただきます。言語的にはJava、ASP.NET(C#)、PHP...

    株式会社SYNC

    フリーランス

    【PHP/JavaScript/Ajax/jQuery】Webエンジニア★Webシステム開発

    月額単価 :60万円〜

    Web受託会社内にて、PHPによるシステム開発案件が複数走っており、そのいずれかに参画頂きます。 言語...

    フリーランス

    【Java(Spring Boot)/HTML/CSS/JavaScript他】サーバーサイドエンジニア★大手金融業の社内向けアプリ開発

    月額単価 :70万円〜80万円

    同社はWebシステムやスマフォアプリ開発を得意とする受託開発企業です。 今回は既存であるJavaを用いた...

    正社員

    【jQuery】Webデザイナー|コーポレートサイト・LPなどのデザイン

    年収 :350万円〜850万円

    【仕事内容】 プロモーションサイトを始め、ECサイトやコーポレートサイト、LPなどのデザイン、UI設計...

    インターリンク株式会社