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

2019年8月21日

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

やり方

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

<div style="overflow-x: scroll;">
	<table>
		・
		・
		・
	</table>
</div>

サンプル

適用前:

モデル名 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
<table>
<tbody>
<tr>
<td>モデル名</td>
<td>PIG-S300</td>
<td>PIM-A300</td>
<td>PIS-A300</td>
<td>PIK-KS30</td>
<td>PIK-A300</td>
</tr>
<tr>
<td>消費電力(年)</td>
<td>201kWh/年</td>
<td>254kWh/年</td>
<td>256kWh/年</td>
<td>269kWh/年</td>
<td>280kWh/年</td>
</tr>
<tr>
<td>amazon</td>
<td><iframe style="width: 120px; height: 240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=ikaken-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B01K1QPOP8&linkId=912f2eb513379f5c073b9e71fc8e1490"></iframe></td>
<td><iframe style="width: 120px; height: 240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=ikaken-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B013HAWK48&linkId=7152d37f6e60ac52976637414367aecc"></iframe></td>
<td><iframe style="width: 120px; height: 240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=ikaken-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B075MWQF21&linkId=6f695d5d92b5be482ec3213e3a5017f9"></iframe></td>
<td>ケーズデンキ<a href="https://www.ksdenki.com/shop/g/g4904710422335/" target="_blank" rel="noopener"><img class="alignnone wp-image-817" src="https://www.ikaken.com/wp-content/uploads/2018/08/4904710422335_5-300x300.jpg" alt="" width="162" height="162" />PIK-KS30 K ブラック</a></td>
<td><iframe style="width: 120px; height: 240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=ikaken-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B00LTCUADK&linkId=94c4c035f3f8c02f528232f6eca72ee3"></iframe></td>
</tr>
<tr>
<td>メーカーサイト</td>
<td><a href="https://www.tiger.jp/front/productdetail/confirm?productId=PIG-S#tokutyou" target="_blank" rel="noopener"> PIG-S300</a></td>
<td><a href="https://www.tiger.jp/front/productdetail/confirm?productId=PIM-A#tokutyou" target="_blank" rel="noopener">PIM-A300</a></td>
<td><a href="https://www.tiger.jp/front/productdetail/confirm?productId=PIS-A#tokutyou" target="_blank" rel="noopener">PIS-A300</a></td>
<td>無し</td>
<td><a href="https://www.tiger.jp/front/productdetail/confirm?productId=PIK-A#tokutyou" target="_blank" rel="noopener">PIK-A300</a></td>
</tr>
</tbody>
</table>

適用後:

モデル名 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
<div style="overflow-x: scroll;">
<table>
<tbody>
<tr>
<td>モデル名</td>
<td>PIG-S300</td>
<td>PIM-A300</td>
<td>PIS-A300</td>
<td>PIK-KS30</td>
<td>PIK-A300</td>
</tr>
<tr>
<td>消費電力(年)</td>
<td>201kWh/年</td>
<td>254kWh/年</td>
<td>256kWh/年</td>
<td>269kWh/年</td>
<td>280kWh/年</td>
</tr>
<tr>
<td>amazon</td>
<td><iframe style="width: 120px; height: 240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=ikaken-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B01K1QPOP8&linkId=912f2eb513379f5c073b9e71fc8e1490"></iframe></td>
<td><iframe style="width: 120px; height: 240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=ikaken-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B013HAWK48&linkId=7152d37f6e60ac52976637414367aecc"></iframe></td>
<td><iframe style="width: 120px; height: 240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=ikaken-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B075MWQF21&linkId=6f695d5d92b5be482ec3213e3a5017f9"></iframe></td>
<td>ケーズデンキ<a href="https://www.ksdenki.com/shop/g/g4904710422335/" target="_blank" rel="noopener"><img class="alignnone wp-image-817" src="https://www.ikaken.com/wp-content/uploads/2018/08/4904710422335_5-300x300.jpg" alt="" width="162" height="162" />PIK-KS30 K ブラック</a></td>
<td><iframe style="width: 120px; height: 240px;" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" src="//rcm-fe.amazon-adsystem.com/e/cm?lt1=_blank&bc1=000000&IS2=1&bg1=FFFFFF&fc1=000000&lc1=0000FF&t=ikaken-22&o=9&p=8&l=as4&m=amazon&f=ifr&ref=as_ss_li_til&asins=B00LTCUADK&linkId=94c4c035f3f8c02f528232f6eca72ee3"></iframe></td>
</tr>
<tr>
<td>メーカーサイト</td>
<td><a href="https://www.tiger.jp/front/productdetail/confirm?productId=PIG-S#tokutyou" target="_blank" rel="noopener"> PIG-S300</a></td>
<td><a href="https://www.tiger.jp/front/productdetail/confirm?productId=PIM-A#tokutyou" target="_blank" rel="noopener">PIM-A300</a></td>
<td><a href="https://www.tiger.jp/front/productdetail/confirm?productId=PIS-A#tokutyou" target="_blank" rel="noopener">PIS-A300</a></td>
<td>無し</td>
<td><a href="https://www.tiger.jp/front/productdetail/confirm?productId=PIK-A#tokutyou" target="_blank" rel="noopener">PIK-A300</a></td>
</tr>
</tbody>
</table>
</div>

参考ページ

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

めも

Posted by ikaken