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

罫線なしミニマルテーブル

罫線を一切使わず余白と行間だけで区切るシンプルな表組み。在庫一覧や仕様表など管理画面のミニマルな一覧表示に向く。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-11-01-table">
          <thead>
            <tr><th>商品名</th><th>在庫</th><th>価格</th></tr>
          </thead>
          <tbody>
            <tr><td>ノートA5</td><td>32</td><td>¥320</td></tr>
            <tr><td>ボールペン</td><td>120</td><td>¥110</td></tr>
            <tr><td>クリアファイル</td><td>58</td><td>¥98</td></tr>
            <tr><td>付箋セット</td><td>44</td><td>¥250</td></tr>
          </tbody>
        </table>

CSS

.d05-11-01-table{border-collapse:collapse;font-size:11px;width:100%;color:#333}
        .d05-11-01-table th{
          text-align:left;
          font-weight:600;
          color:#111;
          padding:6px 14px 8px 0;
          border-bottom:2px solid #111;
        }
        .d05-11-01-table td{
          padding:9px 14px 9px 0;
          color:#444;
        }
        .d05-11-01-table tbody tr + tr td{
          border-top:1px solid #eee;
        }

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