[jQuery]をレスポンシブWEBデザイン対応させるプラグインFooTable | WEBデザインのTIPSまとめサイト「ウェブネタチョ」

[jQuery]<table>をレスポンシブWEBデザイン対応させるプラグインFooTable

jQueryプラグイン・ライブラリ

2012.10.09

ホームページやWEBサイトを作っていると、<table>を使った表組みというのはまだまだ健在です。

しかし、iPadやスマホでサイトを見る機会も増えたことで、今までのようなPCサイト向けに表示させていた<table>をレスポンシブWEBデザイン対応させることが多くなってきていると思います。

そこで今回紹介させていただくFooTableですが、「横に長過ぎるテーブルもスマホやタブレットに最適化して表示させたい!」なんて場合に便利な jQuery プラグインです。

FooTable のUI
FooTable のダウンロード
FooTable の設置
レスポンシブWEBデザイン対応について
Breakpoints

FooTable のUI

PCサイトのような幅を確保できるブラウザの場合は、従来のような横に長い<table>の見せ方をしておいて、

<table> をレスポンシブWEBデザイン対応させるjQueryプラグイン「FooTable」

ブラウザの幅が縮小される（もしくはiPhone などスマホでアクセスされた）際にセルが折り畳まれ、「＋」ボタンをクリック（タップ）して開閉させる仕組みになります。

FooTable のダウンロード

以下のページから、FooTableのファイルをダウンロードします。
FooTable

FooTable の設置

jqueryファイルと一緒に、ダウンロードしたfootable.jsとfootable-0.1.cssのファイルを設置します。

<link rel="stylesheet" type="text/css" href="./footable/css/footable-0.1.css" />
<script src="./jquery.min.js"></script>
<script src="./footable/js/footable.js"></script>
<script>
$(function() {
	$('table').footable();
});
</script>

$(function() {

$('table').footable();

});

</script>

※開閉ボタンである画像ファイルも含まれるので、「footable/」のようにフォルダ単位でサーバにアップすることをオススメします。

レスポンシブWEBデザイン対応について

プラグイン提供先であるFooTableのサイトに掲載されているデモソースをベースに組んでみます。

<table class="footable">
<thead>
	<tr>
		<th data-class="expand">名前</th>
		<th data-hide="phone,tablet">電話番号</th>
		<th data-hide="phone">郵便番号</th>
		<th data-hide="phone">住所</th>
    </tr>
</thead>

<tbody>
    <tr>
		<td>山田 太郎</td>
		<td>00-1234-5678</td>
		<td>110-0006</td>
		<td>東京都 台東区</td>
    </tr>
    <tr>
		<td>鈴木 花子</td>
		<td>11-2345-6789</td>
		<td>550-0026</td>
		<td>大阪府 大阪市西区</td>
    </tr>
    <tr>
		<td>田中 一郎</td>
		<td>22-3456-7890</td>
		<td>812-0002</td>
		<td>福岡県 福岡市博多区</td>
    </tr>
    <tr>
		<td>佐藤 次郎</td>
		<td>22-3456-7890</td>
		<td>468-0836</td>
		<td>愛知県 名古屋市天白区</td>
    </tr>
</tbody>
</table>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<td>東京都台東区</td>

</tr>

<tr>

<td>大阪府大阪市西区</td>

</tr>

<tr>

<td>福岡県福岡市博多区</td>

</tr>

<tr>

<td>愛知県名古屋市天白区</td>

</tr>

</tbody>

</table>

まずはレスポンシブWEBデザインに対応させる <table>にclass="footable"を指定します。

続いて、<thead> 内に「＋」ボタンによる開閉の仕掛けを施しますが、「＋」ボタンを付ける列に対してdata-class="expand"を指定します。
（上記例だと「名前」のセルです。）

あとはブラウザ縮小時に非表示にしておく列に対して、data-hide="phone"やdata-hide="tablet"を指定します。
（上記例だと「電話番号」「郵便番号」「住所」のセルです。）

Breakpoints

data-hideで指定するphoneやtabletの値は、footable.jsファイルの18〜20行目で定義されています。

breakpoints: {
	phone: 480,
	tablet: 1024
}

breakpoints: {

phone: 480,

tablet: 1024

}

初期値はスマホは「480px」、タブレットは「1024px」になっていますので、この値はサイトに合わせて調整することができます。

以下のページに、FooTableを使った簡単なテーブルコンテンツのデモを用意しました。

FooTable によるセルの折り畳みのデモ