パーツ番号 05-10-03 ・ CSSのみ
プラン別機能マトリクス(3プラン×複数機能)
縦に機能、横に3つの料金プランを並べた静止マトリクス。料金ページのプラン比較に使える。
プレビュー
ソースコード
HTML
<table>
<thead>
<tr><th>機能</th><th>Light</th><th>Standard</th><th>Pro</th></tr>
</thead>
<tbody>
<tr><td>ユーザー数</td><td>1名</td><td>5名</td><td>無制限</td></tr>
<tr><td>ストレージ</td><td>1GB</td><td>50GB</td><td>500GB</td></tr>
<tr><td>解析機能</td><td class="no">−</td><td class="yes">✓</td><td class="yes">✓</td></tr>
<tr><td>優先サポート</td><td class="no">−</td><td class="no">−</td><td class="yes">✓</td></tr>
</tbody>
</table>CSS
.d05-10-03 table{width:100%;border-collapse:collapse;font-size:10.5px;font-family:sans-serif}
.d05-10-03 th,.d05-10-03 td{border:1px solid #e5e5e5;padding:5px 4px;text-align:center}
.d05-10-03 thead th{background:#2d3648;color:#fff}
.d05-10-03 thead th:nth-child(3){background:#3f4d68}
.d05-10-03 tbody td:first-child{text-align:left;padding-left:6px;background:#f6f7f9;font-weight:600}
.d05-10-03 td.yes{color:#0a7d32;font-weight:700}
.d05-10-03 td.no{color:#bbb}クラス名 .d05-10-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。