先日アップした記事「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
コメント