比較用の表(テーブル)をスマホ対応にしてみた

比較用の表(テーブル)をスマホ対応にしてみた先日アップした記事「PIG-S300を買いに行ったらPIK-KS30を買ってきたって話」で、比較用の表を作ったらスマホだと右側が切れて見えない事が判明。
せっかくレスポンシブのテーマにしたのに、スマホで見れないと残念なので、横スクロールするようにしました。
PCだと下にスクロールバーが出てちょっとカッコ悪いけど、スマホで見ると横にスワイプ出来るので良い感じ。

やり方:

テーブルをdiv要素で囲んで、styleに「overflow-x: scroll;」を指定しただけ。

サンプル

適用前:

モデル名 PIG-S300 PIM-A300 PIS-A300 PIK-KS30 PIK-A300
消費電力(年) 201kWh/年 254kWh/年 256kWh/年 269kWh/年 280kWh/年
amazon ケーズデンキPIK-KS30 K ブラック
メーカーサイト  PIG-S300 PIM-A300 PIS-A300 無し PIK-A300

適用後:

モデル名 PIG-S300 PIM-A300 PIS-A300 PIK-KS30 PIK-A300
消費電力(年) 201kWh/年 254kWh/年 256kWh/年 269kWh/年 280kWh/年
amazon ケーズデンキPIK-KS30 K ブラック
メーカーサイト  PIG-S300 PIM-A300 PIS-A300 無し PIK-A300

 

参考ページ:

テーブルをレスポンシブデザインに対応するためのCSSを使ったレイアウトパターン
https://y-com.info/contents/?p=4346

めも

Posted by ikaken