WEBサイト制作でテーブルを使って表を作成した際に、スマホやタブレットだと表が閲覧しづらくなってしまうことがあります。

今回紹介するjQueryのプラグイン「Basic Table」を使用すると、テーブル要素をレスポンシブで見やすく表示（ブラウザの幅を変更するとテーブルのレイアウトが変更）することが可能です。
ユーザビリティーの向上に繋がるので、レスポンシブでサイト制作をしている場合などにおすすめのプラグインです。

下記にjQueryのプラグイン「Basic Table」の使用方法を記載します。

「Basic Table」の使用方法

下記のページから「Basic Table」をダウンロードします。

https://github.com/jerrylow/basictable

ファイル読込

jQueryとダウンロードした「Basic Table」のjs、cssを読み込みます。

※テーブルのスタイルは別に設定します。

HTML

テーブルを用意します。

JS

用意したテーブルに対し「Basic Table」を使用します。

※オプションなしの場合です。

サンプル

ブラウザの幅を変更するとレイアウトが変わります。

「Basic Table」を使用したデモページ

※他にもオプションがありますのでチェックしてみてください。

まとめ

レスポンシブでサイトを制作していると、テーブルをどのように表示したら見やすいかなど迷うことがあると思います。
上記の方法を使用するとスマートフォンでも、テーブルを綺麗に見やすく表示することが可能になります。

スマートフォンの利用者が増えているので、今後このような対策が必要になってきますよね。
是非チェックしてみてください。