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

角丸カード内包テーブル

テーブル全体を角丸のカードで包み込んだデザイン。会員ランク表示など柔らかい印象を与えたい一覧パーツに向く。

staticcss

プレビュー

ソースコード

HTML

<div class="d05-11-10-card">
          <table class="d05-11-10-table">
            <thead>
              <tr><th>会員名</th><th>ランク</th></tr>
            </thead>
            <tbody>
              <tr><td>中村様</td><td>ゴールド</td></tr>
              <tr><td>小林様</td><td>シルバー</td></tr>
              <tr><td>加藤様</td><td>ブロンズ</td></tr>
            </tbody>
          </table>
        </div>

CSS

.d05-11-10-card{
          width:100%;
          border-radius:14px;
          overflow:hidden;
          box-shadow:0 1px 4px rgba(0,0,0,.12);
          background:#fff;
        }
        .d05-11-10-table{
          border-collapse:collapse;
          font-size:11px;
          width:100%;
        }
        .d05-11-10-table th{
          background:#f5f6f8;
          text-align:left;
          padding:9px 14px;
          color:#222;
          font-weight:600;
        }
        .d05-11-10-table td{
          padding:9px 14px;
          color:#444;
          border-top:1px solid #eee;
        }

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