パーツ番号 10-01-10 ・ CSSのみ

商品比較トグルカード

3商品のスペックを○×で並べた比較表。行にホバーすると該当行が強調表示されます。WooCommerceの商品比較・プラン選択ページに。

echovercss

プレビュー

ソースコード

HTML

<table class="d10-01-10-tbl">
          <thead>
            <tr><th></th><th>ベーシック</th><th>プロ</th><th>プレミアム</th></tr>
          </thead>
          <tbody>
            <tr><td>価格</td><td>¥1,980</td><td>¥3,980</td><td>¥6,980</td></tr>
            <tr><td>容量</td><td class="d10-01-10-ok">○</td><td class="d10-01-10-ok">○</td><td class="d10-01-10-ok">○</td></tr>
            <tr><td>保証</td><td class="d10-01-10-ng">×</td><td class="d10-01-10-ok">○</td><td class="d10-01-10-ok">○</td></tr>
            <tr><td>ギフト包装</td><td class="d10-01-10-ng">×</td><td class="d10-01-10-ng">×</td><td class="d10-01-10-ok">○</td></tr>
            <tr><td>送料無料</td><td class="d10-01-10-ng">×</td><td class="d10-01-10-ok">○</td><td class="d10-01-10-ok">○</td></tr>
          </tbody>
        </table>

CSS

.d10-01-10{background:#f6f7fb}
        .d10-01-10-tbl{border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(30,40,80,.08);font-size:12px;width:280px}
        .d10-01-10-tbl th,.d10-01-10-tbl td{padding:9px 8px;text-align:center;border-bottom:1px solid #eef0f5}
        .d10-01-10-tbl thead th{background:#4f46e5;color:#fff;font-size:12px;font-weight:600}
        .d10-01-10-tbl tbody td:first-child{text-align:left;color:#475569;font-weight:600;background:#f8fafc}
        .d10-01-10-tbl tbody tr{transition:background .15s}
        .d10-01-10-tbl tbody tr:hover{background:#eef2ff}
        .d10-01-10-tbl tbody tr:hover td:first-child{background:#e0e7ff}
        .d10-01-10-ok{color:#10b981;font-weight:700;font-size:15px}
        .d10-01-10-ng{color:#cbd5e1;font-weight:700;font-size:15px}

クラス名 .d10-01-10 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。