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

折りたたみなしの全項目表示比較表(縦長)

省略せず全項目を縦に並べて見せる静止の縦長比較表。仕様書ページや詳細スペック掲載に使える。

staticcss

プレビュー

ソースコード

HTML

<table>
          <tbody>
            <tr><td>対応OS</td><td>Win/Mac/Linux</td></tr>
            <tr><td>言語対応</td><td>日本語/英語/中国語</td></tr>
            <tr><td>最大ユーザー</td><td>500名</td></tr>
            <tr><td>API提供</td><td>REST/GraphQL</td></tr>
            <tr><td>データ保存</td><td>国内サーバー</td></tr>
            <tr><td>認証方式</td><td>SSO対応</td></tr>
          </tbody>
        </table>

CSS

.d05-10-08 .prev{align-items:flex-start}
        .d05-10-08 table{width:100%;border-collapse:collapse;font-size:10.5px;font-family:sans-serif}
        .d05-10-08 td{padding:5px 6px;border-bottom:1px dashed #e2e2e2}
        .d05-10-08 td:first-child{width:38%;color:#888;background:#fafafa}
        .d05-10-08 td:last-child{color:#333;font-weight:600}

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