パーツ番号 05-08-08 ・ CSSのみ

横長比較テーブル型料金表

複数プランの詳細項目を横一列の表で並べて比較する形式。項目数の多いプラン比較に適した構成です。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-08-08-table">
          <thead><tr><th>項目</th><th>Light</th><th>Standard</th><th>Pro</th></tr></thead>
          <tbody>
            <tr><td>月額</td><td>¥980</td><td>¥2,480</td><td>¥4,980</td></tr>
            <tr><td>容量</td><td>5GB</td><td>50GB</td><td>500GB</td></tr>
            <tr><td>サポート</td><td>メール</td><td>優先</td><td>専任</td></tr>
          </tbody>
        </table>

CSS

.d05-08-08-table{width:100%;border-collapse:collapse;font-size:9px;background:#fff;border:1px solid #e2e8f0}
        .d05-08-08-table th,.d05-08-08-table td{padding:6px 4px;text-align:center;border:1px solid #e2e8f0}
        .d05-08-08-table th{background:#0f172a;color:#fff;font-weight:600}
        .d05-08-08-table td:first-child{background:#f8fafc;color:#475569;text-align:left;font-weight:600}

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