Android CSS HTML iPhone Java script

スマートフォンで横長のテーブルを扱う方法

Pocket

PC用につくられたページをモバイル対応にする場合、その画面サイズの違いによりレイアウトの微調整を行わなければならないことがあると思います。

自身もレスポンシブデザインにするため、PC用につくられたソースをゴリゴリっとレスポンシブにしました。

で、何が一番苦労したかというと、HTMLのテーブル構造で、大きなテーブルを扱っている場合です。

data1 data2 data3 data4 data5 data6 data7 data8
aa bb cc dd ee ff gg hh

このようなテーブルは当然スマートフォンだと右側が画面外に飛び出してしまいます。

それではどう対応するか?

ここにいくつかの解法が紹介されています。

この中で、選択された項目のみ表示する方法を試してみました。
"hiding non-essential columns on smaller screens" を画面内で検索してください。

※ちなみにこのサイトではソースのダウンロードという便利なリンクがない!ので、
HTMLソースを見て、CSS,JSは自分でリンクをクリックしてコピペして、、、要はデモ環境を自分でつくってください。

構造自体はそんなに難しくないのですが、私の場合、PHPで動的に生成しているテーブルにこのコードを埋め込む必要があったため、大変苦労しました。

スマートフォンでのモバイルの扱いに苦労されている方はぜひ参考にしてみてください。

Ads by Google

Ads by Google

-Android, CSS, HTML, iPhone, Java script

© 2021 みる米技術部 Powered by AFFINGER5