パーツ番号 10-14-06 ・ CSSのみ

物件比較テーブルカード

2件の物件条件を表形式で並べた比較用カードです。「気になる物件リスト」など複数物件を並べて検討させたい場面に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <table class="cmp">
            <tr><th></th><th>物件A</th><th>物件B</th></tr>
            <tr><td>家賃</td><td>8.5万円</td><td>9.2万円</td></tr>
            <tr><td>面積</td><td>25㎡</td><td>30㎡</td></tr>
            <tr><td>駅徒歩</td><td>5分</td><td>8分</td></tr>
          </table>
        </div>

CSS

.d10-14-06 .card{width:240px;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);padding:14px;}
        .d10-14-06 .cmp{width:100%;border-collapse:collapse;font-size:11.5px;}
        .d10-14-06 .cmp th{color:#999;font-weight:700;text-align:center;padding:4px 6px;border-bottom:2px solid #eee;}
        .d10-14-06 .cmp td{padding:7px 6px;text-align:center;border-bottom:1px solid #f0f0ee;color:#333;}
        .d10-14-06 .cmp td:first-child{text-align:left;color:#999;font-size:10.5px;}
        .d10-14-06 .cmp tr:last-child td{border-bottom:none;}

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