質問: ワードプレスでスポイラーの中にテーブルを作成したところモバイル端末での表示が崩れてしまいました。 スポイラーの中にあるテーブルにモバイルで表示されていることを認識させるためにはどうすればよいですか? 前提・実現したいこと タブや開閉式のスポイラーの中に入れたテーブルを表示が崩れないモバイル表示にしたい。! 発生している問題・エラーメッセージ スポイラーの中にいれたテーブルのモバイル表示が崩れる。 (スポイラーの中にあるコンテンツがモバイルで表示されているのにモバイルという認識をおこなっていない気がします。) PCでは画面を小さくしても正常にレスポンシブで表示される。 タブやスポイラーの中にテーブルを入れているが、テーブルのみ、タブの中にテーブルを入れたときも正常に表示される。 スポイラーの中にはいっているテーブルがアイフォンなどの端末で見たときのみ表示が崩れる。 アイフォンで表示崩れが起きている画面を横や縦向きにして元に戻すと表示崩れが解消され正常に表示される。 補足情報(言語/FW/ツール等のバージョンなど) ワードプレスのプラグインを使用してます。 TablePress(テーブル作成プラグイン) FooTable(モバイル判定がでるとテーブルを一部折りたたみ見やすくしてくれるプラグイン) Shortcodes Ultimate(タブやトグルをショートコードで簡単に設定できるプラグイン) プラグインの変更やコードなどで実現できれば手段は何でも構いません。 全くの素人なのでわらにもすがる思いです。助言をいただけますと幸いです。
回答: 問題の切り分けが必要そうです。 下記、ご確認ください。 * androidやタブレットでは表示はどうなっていますか? * FooTableでもっと簡単なテーブルを組んだ場合はきちんとモバイル判定してくれているでしょうか? * FooTableにも色々設定があるようですが、(参考にしたサイト)なんでもいいので「モバイルのみ非表示項目」を設定した場合はきちんと非表示になっていますか?(PC、スマフォ双方で確認してください) * ブラウザのデベロッパーツールなどのコンソールにてエラーが出ていないかも確認してみてください * 他のテーブルのレスポンシブ対応プラグイン、例えばResponsive Tablesなども検証してみてください ※手元にWordpressの実行環境がないため状況から考えられる確認事項を提示しています。