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

ゆったり余白テーブル(広い行間)

行間と余白を広く取り読みやすさを重視した表組み。料金プラン比較など落ち着いて閲覧させたい一覧表示に適する。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-11-08-table">
          <thead>
            <tr><th>プラン</th><th>容量</th></tr>
          </thead>
          <tbody>
            <tr><td>ライト</td><td>10GB</td></tr>
            <tr><td>スタンダード</td><td>50GB</td></tr>
            <tr><td>プレミアム</td><td>200GB</td></tr>
          </tbody>
        </table>

CSS

.d05-11-08-table{
          border-collapse:collapse;
          font-size:11px;
          width:100%;
        }
        .d05-11-08-table th{
          text-align:left;
          padding:14px 18px;
          border-bottom:1px solid #ddd;
          color:#111;
          font-weight:600;
        }
        .d05-11-08-table td{
          padding:16px 18px;
          border-bottom:1px solid #f0f0f0;
          color:#444;
        }

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