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

カテゴリ見出し区切り比較表

colspanで結合した見出し行で機能をグループ分けした静止表。項目数の多い仕様比較を整理して見せるのに使える。

staticcss

プレビュー

ソースコード

HTML

<table>
          <tbody>
            <tr class="cat"><td colspan="2">基本機能</td></tr>
            <tr><td>ファイル保存</td><td>&#9711;</td></tr>
            <tr><td>共有リンク</td><td>&#9711;</td></tr>
            <tr class="cat"><td colspan="2">拡張機能</td></tr>
            <tr><td>バージョン管理</td><td>&#9711;</td></tr>
            <tr><td>監査ログ</td><td>&#9651;</td></tr>
          </tbody>
        </table>

CSS

.d05-10-12 table{width:100%;border-collapse:collapse;font-size:11px;font-family:sans-serif}
        .d05-10-12 td{padding:6px 8px;border-bottom:1px solid #eee;color:#444}
        .d05-10-12 .cat td{background:#1f2937;color:#fff;font-weight:700;font-size:10px;letter-spacing:.05em}
        .d05-10-12 tr:not(.cat) td:last-child{text-align:right;color:#333}

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