スマホでテーブルの幅が大きいとはみ出るので改善したいがうまくいかなかった

jQueryプラグインでテーブル幅のはみ出しを改善してみる

レスポンシブデザインでスマホやタブレットなどに対応はしているんですが、テーブルだけがどうもはみ出て表示されているようで改善してみます。

画面の幅が小さいスマホはテーブルの右側が見えなくなるので見えない場合のスクロールバーを表示させるやり方、

テーブルの見える部分はそのままに見えない部分を下に表示させる（2段にする）というやり方もあるようです。

どちらにしてもCSSとJavascriptでできるようですが自作で作るのもメンドウなのでjQueryプラグインがあったので設定してみましたが・・・

うまくいかなかったので一応メモとして残しておきます。今後改善できたらまたメモします。

以下ワードプレスを使っている場合の設定です。

Responsive Tablesを使ってみる

Crafty Responsive Tables | Playground from ZURB

Don't let tables break your responsive layout anymore. This simple JS/CSS combo will let your tables adapt to small device screens without everything going to h...

zurb.com

こちらにResponsive TablesというjQueryプラグインがあるので試してみました。

ダウンロードボタンを押す

 試しに「index.html」ファイルをブラウザに入れてみてサンプルを表示させてみます。

このように横スクロールバーが表示されて、スマホでも見やすくなるようです。

Responsive Tablesをサイトに設置する

cssファイルとjsファイルをアップロード

ワードプレスを使っている場合はテーマフォルダ内のjs,cssフォルダにアップロードします。

このようにテーマ内のjsフォルダとcssフォルダにそれぞれjsファイルとcssファイルをアップロードします。

functions.phpにフックを設置する

次にjsファイルとcssファイルを呼び出すフックを設置します。

テーマ内のfunctions.phpを開いて編集します。

function.phpにフックを追加

function theme_name_scripts() {
    wp_enqueue_script('responsive-tables-js', get_template_directory_uri().'/js/responsive-tables.js');
    wp_enqueue_style( 'responsive-tables-css', get_template_directory_uri().'/css/responsive-tables.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

このように入れれば各js,cssファイルを読み込んでくれます。

tableタグにclass追加

最後に目的のtableタグにclassを追加します。これどうせすべてのtableタグに対応したいのでメインのCSSのtableの部分に追加しても良いような気がします。

上のようにtableタグにclass=”responsive”を追加します。

以上で設定終了です。

テーブルもレスポンシブになったか確認

ではうまく表示されるようになったか確認してみます。

ノーマルなテーブルの状態

普通はこんなふうに表示されます。240pxだとぜんぜん見にくいけど、こんなに幅の狭いスマホは無いと思うので（昔のガラケーかな？）480px以上が普通だと思いますが、見づらいけど横スクロールすれば見れないこともない。

Responsive Tables 適用時

Responsive Tablesを適用すると・・・さらに見づらくなってるんですけど（汗）こりゃ使えないみたい。

パソコンで見たテーブルの状態

というわけで、Responsive Tables を使ったらテーブルが余計見づらくなったので辞めました（汗）

何が原因か？テーマか？設置方法か？原因不明ですが、横スクロールしなきゃいけないのはノーマルの状態も同じなので、余計なjsを読み込んで重くなるよりは普通の状態で良いような気がしてきたのでデフォルトの状態に戻しました。

もっと良いテーブルの表示方法があればまたチャレンジしてみます。