Contents
jQueryプラグインでテーブル幅のはみ出しを改善してみる
レスポンシブデザインでスマホやタブレットなどに対応はしているんですが、テーブルだけがどうもはみ出て表示されているようで改善してみます。
画面の幅が小さいスマホはテーブルの右側が見えなくなるので見えない場合のスクロールバーを表示させるやり方、
テーブルの見える部分はそのままに見えない部分を下に表示させる（2段にする）というやり方もあるようです。
どちらにしてもCSSとJavascriptでできるようですが自作で作るのもメンドウなのでjQueryプラグインがあったので設定してみましたが・・・
うまくいかなかったので一応メモとして残しておきます。今後改善できたらまたメモします。
以下ワードプレスを使っている場合の設定です。
Responsive Tablesを使ってみる
こちらにResponsive TablesというjQueryプラグインがあるので試してみました。
ダウンロードボタンを押す
-
- ダウンロードしたZIPファイルを解凍します。
-
- フォルダを開くとこのようなファイル群があります。使うのは赤枠の２つのファイルだけ。
試しに「index.html」ファイルをブラウザに入れてみてサンプルを表示させてみます。
-
- 通常のパソコンで見たテーブルの状態
-
- スマホなどの幅の狭い画面で見た状態。横スクロールバーが表示される。
このように横スクロールバーが表示されて、スマホでも見やすくなるようです。
Responsive Tablesをサイトに設置する
cssファイルとjsファイルをアップロード
ワードプレスを使っている場合はテーマフォルダ内のjs,cssフォルダにアップロードします。
-
- responsive-tables.jsをjsディレクトリにアップロードする。
-
- responsive-tables.cssを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を読み込んで重くなるよりは普通の状態で良いような気がしてきたのでデフォルトの状態に戻しました。
もっと良いテーブルの表示方法があればまたチャレンジしてみます。