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

公開日：2018年01月10日最終更新日：2021年12月22日

レスポンシブ対応のjQueryプラグインはたくさんありますが、本コラムでは「Basic Table」を使って、テーブルレイアウトをレスポンシブ対応させる方法について解説します。テーブルをレスポンシブ対応させるには、jQueryプラグインだけでなくCSSのみで実現する方法や、jQueryプラグインとCSSを組み合わせた方法があります。
HTMLとCSSのみでレスポンシブテーブルデザインを作成する方法については、「レスポンシブ対応のtableを作成しよう！」をご参考下さい。

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

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

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

「Basic Table」作者のサイト：https://www.jerrylow.com/basictable/

●Basic Table

ダウンロードサイトの真ん中にある緑色の「View on Github」ボタンをクリックして下さい。

●Basic Tableのダウンロード

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

▲ページトップへ戻る

1.2. jQueryプラグインの使える環境を整える

1.2.1. 圧縮ファイル（basictable-master.zip）を解凍する

次に、jQueryプラグインを使う環境をPC上に作成します。まずは、ダウンロードした圧縮ファイル（basictable-master.zip）を解凍して下さい。

●圧縮ファイル（basictable-master.zip）の解凍

ZIPファイルを右クリックして、メニューから「すべて展開」を選択します。「basictable-master」フォルダー内にCSSファイルやJavaScriptファイルなど、レスポンシブ対応用の各種ファイルが展開されます。

●「basictable-master」フォルダー

▲ページトップへ戻る

1.2.2. 「demo」フォルダーを確認する

解凍した「basictable-master」フォルダー直下の「demo」フォルダーの中には、レスポンシブ対応HTMLのサンプルファイルが入っています。
「index.html」ファイルをダブルクリックして動作を確認してみて下さい。

●「Basic Table」のサンプルHTML(index.html）

通常のテーブルデザインは、見出しの「NAME」、「AGE」、「GENDER」、「HEIGHT」などの項目が１列目に表示され、そのデーターが下のセルに一覧として表示されています。

●レスポンシブテーブルデザイン(index.html）

ブラウザーの幅を小さく（568px以下に）してみると、見出しの項目名が左側の列、データーが右側の列に表示されます。サンプルを元に、レスポンシブテーブルを作成してみましょう。

▲ページトップへ戻る

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

ローカルPC上に、Webサイト作成用のフォルダーを用意して、HTMLドキュメントを保存するフォルダーに、プラグイン関連ファイルをコピーします。

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

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

●「basictable-master」フォルダー

●「basictable-master\demo\css」フォルダー

「basictable-master」フォルダー直下にある「jquery.basictable.min.js」ファイルを「www\js」フォルダーにコピーし、「basictable.css」ファイルを、「www\css」フォルダー内にコピーします。また、「basictable-master\demo\css」フォルダーにある「style.css」ファイルを「www\css」フォルダーにコピーします。「www」フォルダー内の構成は以下の通りです。

・「www\css\basictable.css」
・「www\css\style.css」
・「www\js\jquery.basictable.min.js」

次に、レスポンシブテーブルの元となるテーブルを作成した後に、プラグインを適用していきましょう。

▲ページトップへ戻る

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

まずは、レスポンシブ対応前の基本となるテーブルを作成しましょう。「responsive-table1.html」を先程作成したWebサイト用のフォルダーに保存して下さい。ファイルの保存形式は「utf-8」にします。本コラムでは、「www」フォルダーの直下にHTMLファイルを保存しています。

●responsive-table1.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブテーブル</title>
<link rel="stylesheet" type="text/css" href="css/style.css" /> </head>
<body>
<h1>レスポンシブテーブルデザイン</h1>
<table id="table">
<thead>
<tr>
<th>見出し1</th>
<th>見出し2</th>
<th>見出し3</th>
</tr>
</thead>
<tbody>
<tr>
<td>データ1-1</td>
<td>データ1-2</td>
<td>データ1-3</td>
</tr>
<tr>
<td>データ2-1</td>
<td>データ2-2</td>
<td>データ2-3</td>
</tr>
<tr>
<td>データ3-1</td>
<td>データ3-2</td>
<td>データ3-3</td>
</tr>
</tbody>
</table>
</body>
</html>

「responsive-table1.html」では、「style.css」でデモ(demo)と同じスタイルのテーブルデザインを作成しています。<link>タグで、スタイルシートの「style.css」を指定しています。

テーブルに対して、レスポンシブ対応用の指定はまだしていません。CSSでテーブルの枠線や色、その他テキストの位置や折り返し処理などを設定しています。ブラウザーの幅を小さくすると、テーブルの幅と内容が自動調整されて小さくなる設定です。テーブルの「見出しの項目」が一番上の行に横長に配置されたものになります。このテーブルにCSSとJavaScriptを追加して、レスポンシブ対応用のテーブルを作成します。

●「responsive-table1.html」

HTMLコードの注意点として、「<thead>タグ」や「<th>タグ」、「<tbody>タグ」の構成は基本崩さないようにしましょう。「<th>タグ」は１行目の見出しでのみ使います。「<th>タグ」をその他の行で使うとレスポンシブ対応した際に正しく表示されなくなります。また、<table>タグには「id="table"」を指定して下さい。

▲ページトップへ戻る

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

それでは、レスポンシブ対応のコードを追加していきましょう。ブラウザーの幅を小さくすると、見出しが左側に配置され、データーが右側に配置されるテーブルになります。

●responsive-table1.html

<html lang="ja">
<head>
<meta charset="utf-8">
<title>レスポンシブテーブル</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link rel="stylesheet" type="text/css" href="css/basictable.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script type="text/javascript" src="js/jquery.basictable.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#table').basictable();
});
</script>
</head>
<body>
<h1>レスポンシブテーブルデザイン</h1>
<table id="table">
・・・省略・・・
</table>
</body>
</html>

サンプルコードでは、レスポンシブテーブル対応のスタイルシート「css/basictable.css」とjqueryプラグインの「js/jquery.basictable.min.js」を追加しています。また、Googleが提供しているjQueryファイルの「jquery.min.js」も追加します。
<script>タグでは、HTMLドキュメントの読み込みが完了した後に、「Basic Table」プラグインを実行する処理が記述されています。

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