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

機能チェック付き料金表

各プランで使える機能を✓と×で一覧比較する表形式。SaaSの機能差分をわかりやすく伝える比較表として使えます。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-08-03-table">
          <thead><tr><th></th><th>ベーシック</th><th>プロ</th></tr></thead>
          <tbody>
            <tr><td>プロジェクト数</td><td>3</td><td>無制限</td></tr>
            <tr><td>連携機能</td><td class="d05-08-03-x">×</td><td class="d05-08-03-o">✓</td></tr>
            <tr><td>レポート出力</td><td class="d05-08-03-x">×</td><td class="d05-08-03-o">✓</td></tr>
            <tr><td>チーム招待</td><td class="d05-08-03-o">✓</td><td class="d05-08-03-o">✓</td></tr>
          </tbody>
        </table>

CSS

.d05-08-03-table{width:100%;border-collapse:collapse;font-size:9.5px;background:#fff}
        .d05-08-03-table th,.d05-08-03-table td{padding:7px 6px;text-align:center;border-bottom:1px solid #e5e7eb}
        .d05-08-03-table th{background:#f1f5f9;color:#0f172a;font-size:9.5px}
        .d05-08-03-table td:first-child{text-align:left;color:#475569}
        .d05-08-03-o{color:#16a34a;font-weight:800}
        .d05-08-03-x{color:#cbd5e1;font-weight:800}

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