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

公開日:2018/12/13 更新日:2020/11/12

やりたいこと

Welcartのカート画面に、注文内容が表記されたテーブルがあります
パソコンで使う分には問題ないのですが、スマホで表示したときに商品名の表示が読みにくくなってしまいます。オプション項目が増えたりすると尚更です
スマホ表示のときはテーブルではなくdlリストを使いたいところですが、Welcartのテンプレートからソースが吐き出される都合上、テーブルにならざるをえません
ということで、スマホ表示でも問題ないレイアウトになるよう、テーブルに対する上書き用スタイルを検討してみました
※動作確認したテーマは「Welcart Basic」になります。他のテーマでは適用できない可能性があります

サンプルコード

#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;
}

仕組み、解説、補足など

theadタグの中にある既存の見出しを非表示にして、tbodyの各項目に対してbefore疑似要素を設定して項目名をくっつけています

ご質問など受け付けています

記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。

ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。