ID非公開

2022/5/11 23:02

33回答

tableのレスポンシブデザインを教えてください。 画像のような価格表があります。横に種類、縦に内容で、表には価格が入ります。

画像

HTML、CSS | ホームページ作成85閲覧xmlns="http://www.w3.org/2000/svg">100

ベストアンサー

1
画像

1人がナイス!しています

その他の回答(2件)

0

ID非公開さん >・・・・画像のように種類で1つの表を作る事は出来ない・・・・・・・ ご参考に↓ <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <style> .table { width: 60%; height: 500px; margin:8px auto; box-sizing: border-box; display:flex; justify-content:flex-end; } .box{ width: 19%; } .td { border-left:1px solid; border-bottom:1px solid; line-height:48px; text-align:center; position: relative; } .td:first-child { border-top: 1px solid; } .box:last-child .td{ border-right: 1px solid; } .box:first-child .td:before { width: 100%; height: 49px; position: absolute; top: -1px; left: -100%; display: block; border-left:1px solid; border-bottom:1px solid; border-top-width:0px; content: ""; } .box:first-child .td:nth-child(2):before { content: "内容1"; } .box:first-child .td:nth-child(3):before { content: "内容2"; } .box:first-child .td:nth-child(4):before { content: "小計"; } .box:first-child .td:nth-child(5):before { content: "内容3"; } .box:first-child .td:nth-child(6):before { content: "内容4"; } .box:first-child .td:nth-child(7):before { content: "内容5"; } .box:first-child .td:nth-child(8):before { content: "小計"; } .box:first-child .td:nth-child(9):before { content: "合計"; } .box:first-child .td:nth-child(10):before { content: "割引"; } .box:first-child .td:first-child:before { border-top:1px solid; } @media screen and (max-width: 640px) { .table { flex-flow:column; justify-content:flex-start; align-items:flex-end; } .box { margin-bottom: 48px; width: 49%; } .box .td{ border-right: 1px solid; } .box .td:before { width: 100%; height: 49px; position: absolute; top: -1px; left: -100%; display: block; border-left:1px solid; border-bottom:1px solid; border-top-width:0px; content: ""; } .box .td:first-child:before { border-top:1px solid; } .box .td:nth-child(2):before { content: "内容1"; } .box .td:nth-child(3):before { content: "内容2"; } .box .td:nth-child(4):before { content: "小計"; } .box .td:nth-child(5):before { content: "内容3"; } .box .td:nth-child(6):before { content: "内容4"; } .box .td:nth-child(7):before { content: "内容5"; } .box .td:nth-child(8):before { content: "小計"; } .box .td:nth-child(9):before { content: "合計"; } .box .td:nth-child(10):before { content: "割引"; } } </style> </head> <body> <div class="table"> <div class="box"> <div class="td">種類A</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> </div> <div class="box"> <div class="td">種類B</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> </div> <div class="box"> <div class="td">種類C</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> </div> <div class="box"> <div class="td">種類D</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> <div class="td">&yen;000</div> </div> </div> </body> </html>

0

>tableのレスポンシブデザインを教えてください。 >画像のような価格表があります。横に種類、縦に内容で、表には価格が入ります。 >これをスマホで表示する際分割したいのですが、画像のように種類で1つの表を作る事は出来ないでしょうか? 通常はCSS Gridで対応します。 CSS Gridを真面目に勉強すると、結構 難しいので手抜きして勉強したほうが良いですが、repeat()関数は難しいですが それはチェント勉強して下さい。 蛇足ですが (メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、SEO(Search Engine Optimization:検索エンジン最適化)的には当然 マイナスになるので ご注意ください。 もしも フロントエンド(プロ)を目指すなら、(メディアクエリは除き)pxなどの絶対単位を使っていると「特定の解像度に依存する」ので、当然 プロとしては失格と言って良いでしょう。 pxなどの絶対単位を使っていると、なぜ SEO的にマイナスになるのか、なぜ プロとして失格なのかは、下記「ダメダメ・デモ」をChromeモバイル・エミュレーターで3000px解像度でチェックしてみれば一目瞭然です(画像や文字などが非常に小さくなる)。 モバイル・エミュレーターで解像度を変更したら、必ずリロードして下さい。 ダメダメ・デモ http://xd305417.html.xdomain.jp/demo/test/005.htm 自分が作ったページも「1k~3k」解像度でチェックしてみると良いでしょう。 PCフレンドリー・デモ http://xd305417.html.xdomain.jp/demo/test/003.htm Chromeモバイル・エミュレーターの操作法 http://ashtarte.pa.land.to/utf8/smt.cgi?r+sara/&bid+0000052B&tsn+0000052B&bts+2021/11/29%2015%3A52%3A51& Chromeモバイル・エミュレーターでチェックする場合、モニターは かえって1k解像度のほうが分かりやすいでしょう。 現状で1k解像度モニターが無い場合、(モニターが1600px解像度 以上なら)新規アカウントを作成し解像度を「800px~1280px」程度の解像度に設定すると良いでしょう(アカウント名は「1k」とかにして、そのアカウントは1k解像度専用にする)、1366px解像度 以下なら特に いじらなくても良いです。