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

ダークテーマデータテーブル

黒背景に白文字で構成した静止のダークテーブル。開発者向け管理画面やサーバー監視画面の一覧表示に馴染む。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-11-12-table">
          <thead>
            <tr><th>サーバー</th><th>状態</th></tr>
          </thead>
          <tbody>
            <tr><td>web-01</td><td class="d05-11-12-ok">稼働中</td></tr>
            <tr><td>web-02</td><td class="d05-11-12-ok">稼働中</td></tr>
            <tr><td>db-01</td><td class="d05-11-12-err">停止</td></tr>
          </tbody>
        </table>

CSS

.d05-11-12-table{
          border-collapse:collapse;
          font-size:11px;
          width:100%;
          background:#111827;
        }
        .d05-11-12-table th{
          background:#1f2937;
          color:#e5e7eb;
          text-align:left;
          padding:8px 12px;
          font-weight:600;
        }
        .d05-11-12-table td{
          padding:8px 12px;
          color:#d1d5db;
          border-bottom:1px solid #1f2937;
        }
        .d05-11-12-ok{
          color:#34d399;
          font-weight:700;
        }
        .d05-11-12-err{
          color:#f87171;
          font-weight:700;
        }

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