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

ステータスバッジ付きテーブル

各行の状態列に色分けされたバッジを埋め込んだ表組み。注文管理やタスク一覧など状態を一目で把握したい表示に使う。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-11-06-table">
          <thead>
            <tr><th>注文番号</th><th>状態</th></tr>
          </thead>
          <tbody>
            <tr><td>#10231</td><td><span class="d05-11-06-badge d05-11-06-ok">完了</span></td></tr>
            <tr><td>#10232</td><td><span class="d05-11-06-badge d05-11-06-wait">保留</span></td></tr>
            <tr><td>#10233</td><td><span class="d05-11-06-badge d05-11-06-err">失敗</span></td></tr>
          </tbody>
        </table>

CSS

.d05-11-06-table{
          border-collapse:collapse;
          font-size:11px;
          width:100%;
        }
        .d05-11-06-table th{
          text-align:left;
          padding:7px 10px;
          border-bottom:1px solid #333;
          color:#111;
        }
        .d05-11-06-table td{
          padding:8px 10px;
          border-bottom:1px solid #eee;
          color:#333;
        }
        .d05-11-06-badge{
          display:inline-block;
          padding:2px 9px;
          border-radius:20px;
          font-size:10px;
          font-weight:600;
        }
        .d05-11-06-ok{background:#e3f6e9;color:#1e8a4c}
        .d05-11-06-wait{background:#fdf1dc;color:#b8791b}
        .d05-11-06-err{background:#fbe4e4;color:#c0392b}

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