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

コンパクト密度テーブル(狭い行間)

行の高さを詰めて情報密度を高めた表組み。会員一覧やログなど一画面に多くの行を表示したい管理画面に向く。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-11-07-table">
          <thead>
            <tr><th>ID</th><th>名前</th><th>ステータス</th></tr>
          </thead>
          <tbody>
            <tr><td>001</td><td>山田太郎</td><td>有効</td></tr>
            <tr><td>002</td><td>佐々木花</td><td>有効</td></tr>
            <tr><td>003</td><td>高橋一郎</td><td>停止</td></tr>
            <tr><td>004</td><td>渡辺次郎</td><td>有効</td></tr>
            <tr><td>005</td><td>伊藤三郎</td><td>停止</td></tr>
          </tbody>
        </table>

CSS

.d05-11-07-table{
          border-collapse:collapse;
          font-size:10px;
          width:100%;
        }
        .d05-11-07-table th{
          text-align:left;
          padding:3px 8px;
          border-bottom:1px solid #999;
          color:#111;
          font-weight:600;
        }
        .d05-11-07-table td{
          padding:3px 8px;
          border-bottom:1px solid #eee;
          color:#444;
          line-height:1.3;
        }

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