jspでPC/SPの表示切替

Question

お世話になっております。

現在WEBサイトを製作しており、応募履歴のようなものを表示する画面のPC/スマホ表示切替で詰まっています。

既に画面サイズを判断してレスポンシブにcssを読み込む機能はできているのですが、
今回やりたいのはbootstrapで言うところのグリッドシステムのような、いわゆる表示切替です。

jsp側でforeachをつかってjava側で取得しておいた履歴リストをテーブル表示させるという簡単な内容なのですが、
PC用のcssとSP用のcssでそれぞれ表示制御をするために「display: none;」で振り分けてもよいのですが、
そうするとPC表示用のテーブルと、SP表示用のテーブルとで2回同じリストをforeachして、どちらを表示させるかというjspになってしまいます。

本来はforeach内でPCとSPの切り替えを行えれば1回のforeachで済むのですが、foreach内に<div id="pc">してしまうと改行が入ってしまい
テーブルのレイアウトが崩れてしまいます。

これをやろうと思った時はやはりforeachを2回やることは避けられないのでしょうか。

なにか解決策をお持ちでしたらご教示お願い致します。

Answer 1

一回のループでデータを出力すれば良いと思います。
スマホとPCでCSSを適用し分けれているのであれば、CSSの変更だけでPC向けとスマホ向けで表示の仕方を変えれば良いのです。
また、そのようにできるHTMLを出力すれば良いと思います。

Comments

[saitama1232]

ご回答ありがとうございます。
ループ内でdivタグやtableタグを使わず、olタグなどを用いて表示の出しわけができました。