← 動的パーツギャラリーへ戻る

パーツ番号 05-02-11 ・ CSSのみ

先頭列固定の横スクロール比較表

列数が多い料金表を横スクロールでき、項目名の列だけ画面に固定されます。WordPressでプラン数が多い比較表をスマホでも見やすく提供できます。

mobilescrollcss

プレビュー

ソースコード

HTML

<div class="d05-02-11-scroll">
          <table class="d05-02-11-tbl">
            <thead><tr><th>機能</th><th>フリー</th><th>スタンダード</th><th>プロ</th><th>エンタープライズ</th></tr></thead>
            <tbody>
              <tr><td>ユーザー数</td><td>1</td><td>5</td><td>30</td><td>無制限</td></tr>
              <tr><td>ストレージ</td><td>1GB</td><td>50GB</td><td>500GB</td><td>無制限</td></tr>
              <tr><td>API連携</td><td>×</td><td>×</td><td>○</td><td>○</td></tr>
              <tr><td>専任担当</td><td>×</td><td>×</td><td>×</td><td>○</td></tr>
            </tbody>
          </table>
        </div>

CSS

.prev.d05-02-11{padding:0;align-items:stretch}
        .d05-02-11-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
        .d05-02-11-tbl{border-collapse:collapse;width:100%;min-width:460px;font-size:11px}
        .d05-02-11-tbl th,.d05-02-11-tbl td{border:1px solid #e5e7eb;padding:9px 14px;text-align:center;white-space:nowrap}
        .d05-02-11-tbl thead th{background:#f8fafc;color:#374151;font-weight:700}
        .d05-02-11-tbl th:first-child,.d05-02-11-tbl td:first-child{position:sticky;left:0;background:#fff;text-align:left;color:#374151;font-weight:700;box-shadow:2px 0 4px rgba(0,0,0,.05)}
        .d05-02-11-tbl thead th:first-child{background:#f8fafc;z-index:2}

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