ミギムキ

Welcartのカート画面のテーブルレイアウトをレスポンシブに整えたい

やりたいこと

サンプルコード

#cart_table { margin: 30px 0px 0px; width: 100%; } #cart_table tr, #cart_table th, #cart_table td { display: block; width: 100%; } #cart_table > thead { display: none; } #cart_table > tbody > tr:nth-of-type(n + 2) { margin: 30px 0px 0px; } #cart_table > tbody > tr > td { position: relative; padding: 10px 10px 10px 10em; border-top: 1px solid #3388dd; } #cart_table > tbody > tr > td:before { position: absolute; top: 10px; left: 10px; } #cart_table > tbody > tr > td.num:before { content: "No."; } #cart_table > tbody > tr > td.thumbnail { border: none; } #cart_table > tbody > tr > td.productname:before { content: "商品名"; } #cart_table > tbody > tr > td.unitprice:before { content: "単価"; } #cart_table > tbody > tr > td.quantity:before { content: "数量"; } #cart_table > tbody > tr > td.subtotal:before { content: "金額(税込)"; } #cart_table > tbody > tr > td.stock:before { content: "在庫状態"; } #cart_table > tbody > tr > td.action { padding: 10px; text-align: center; } #cart_table > tfoot > tr > th { text-align: right; } .customer_form { margin: 30px 0px 0px; width: 100%; border-collapse: collapse; table-layout: fixed; } .customer_form th, .customer_form td { padding: 10px; border-top: solid 1px #3388dd; border-bottom: solid 1px #3388dd; }
スポンサー広告

仕組み、解説、補足など