jQueryプラグインの「resTables」を使って、テーブルレイアウトをレスポンシブ対応させる方法について解説します。tableをレスポンシブ対応させる方法には、CSSのみで実現する方法、jQueryプラグインとCSSを組み合わせた方法などがあります。
CSSのみでレスポンシブテーブルを実現する方法については、「レスポンシブ対応のtableを作成しよう！」をご参考下さい。
また、HTML tableの作成方法や、CSSでテーブルスタイルを指定する方法などについては、以下の関連記事をご参考下さい。
目次
1.1. 作者のページから圧縮ファイルをダウンロードする
1.2. 「resTables」プラグインの使える環境を整える
1.2.1. 圧縮ファイル（codefog-restables-1.1.0-0-g5190525.zip）を解凍する
1.2.2. Webサイト用のフォルダーにプラグイン関連ファイルをコピーする
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>
１行目が見出し行で、７列のテーブルを作成しました。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」ファイルを保存し、動作を確認してみましょう。ブラウザーの幅を小さくすると、１列目の見出しである「ID」と最初データの「001」が見出し行として表示され、背景色も変わっています。2列目以降のデーターは、その下の行にまとめて配置され、次の項目である「002」のデータ、「003」のデータというように縦にまとまって配置されるようにレイアウトが変更されました。
関連記事：「HTML入門【<table>タグ】～テーブル（表）を作成してみよう～」
関連記事：「CSSでテーブル（表）をデザインする方法【基礎編】」
関連記事：CSSでテーブル（表）をデザインする方法【応用編】
関連記事：CSSでシンプルなテーブルをデザインする
関連記事：tableをレスポンシブ対応させるjQueryプラグイン「Basic Table」
