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

数値スペック比較表(製品仕様)

重量やバッテリーなどの数値データを並べた静止のスペック比較表。製品ページの仕様欄に使える。

staticcss

プレビュー

ソースコード

HTML

<table>
          <thead><tr><th>項目</th><th>Model X</th><th>Model Y</th></tr></thead>
          <tbody>
            <tr><td>重量</td><td>320g</td><td>410g</td></tr>
            <tr><td>バッテリー</td><td>18h</td><td>24h</td></tr>
            <tr><td>解像度</td><td>1920×1080</td><td>2560×1440</td></tr>
            <tr><td>価格</td><td>39,800円</td><td>52,800円</td></tr>
          </tbody>
        </table>

CSS

.d05-10-10 table{width:100%;border-collapse:collapse;font-size:11px;font-family:sans-serif}
        .d05-10-10 th,.d05-10-10 td{border:1px solid #e5e5e5;padding:6px 8px;text-align:right}
        .d05-10-10 thead th{background:#243044;color:#fff;text-align:center}
        .d05-10-10 tbody td:first-child{text-align:left;background:#f7f7f8;color:#555;font-weight:600}

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