← 静的パーツギャラリーへ戻る

パーツ番号 09-13-03 ・ CSSのみ

テーブル行用スケルトン

見出し行と複数のデータ行を灰色ブロックで並べたテーブルのプレースホルダー。管理画面の一覧表やCSV取込結果の読み込み表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="table09-13-03">
          <div class="thead09-13-03">
            <span class="th09-13-03 tc1"></span>
            <span class="th09-13-03 tc2"></span>
            <span class="th09-13-03 tc3"></span>
            <span class="th09-13-03 tc4"></span>
          </div>
          <div class="trow09-13-03">
            <span class="td09-13-03 tc1"></span>
            <span class="td09-13-03 tc2"></span>
            <span class="td09-13-03 tc3"></span>
            <span class="td09-13-03 tc4"></span>
          </div>
          <div class="trow09-13-03">
            <span class="td09-13-03 tc1"></span>
            <span class="td09-13-03 tc2"></span>
            <span class="td09-13-03 tc3"></span>
            <span class="td09-13-03 tc4"></span>
          </div>
          <div class="trow09-13-03">
            <span class="td09-13-03 tc1"></span>
            <span class="td09-13-03 tc2"></span>
            <span class="td09-13-03 tc3"></span>
            <span class="td09-13-03 tc4"></span>
          </div>
        </div>

CSS

.d09-13-03 .table09-13-03{
          width:100%;
          max-width:280px;
          background:#fff;
          border:1px solid #e5e7eb;
          border-radius:8px;
          overflow:hidden;
          font-family:sans-serif;
        }
        .d09-13-03 .thead09-13-03{
          display:flex;
          align-items:center;
          gap:8px;
          padding:10px 12px;
          background:#f8fafc;
          border-bottom:1px solid #e5e7eb;
        }
        .d09-13-03 .trow09-13-03{
          display:flex;
          align-items:center;
          gap:8px;
          padding:10px 12px;
          border-bottom:1px solid #f1f5f9;
        }
        .d09-13-03 .trow09-13-03:last-child{
          border-bottom:none;
        }
        .d09-13-03 .th09-13-03{
          height:9px;
          border-radius:3px;
          background:linear-gradient(135deg,#cbd5e1,#dbe1e8);
        }
        .d09-13-03 .td09-13-03{
          height:8px;
          border-radius:3px;
          background:linear-gradient(135deg,#e5e9ee,#f2f4f7);
        }
        .d09-13-03 .tc1{ width:28%; }
        .d09-13-03 .tc2{ width:22%; }
        .d09-13-03 .tc3{ width:26%; }
        .d09-13-03 .tc4{ width:14%; }

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