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

カラムヘッダー強調テーブル

見出し行に濃い背景色を敷いて視認性を高めた表組み。部署別予算表など見出しをはっきり伝えたい一覧表示に適する。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-11-04-table">
          <thead>
            <tr><th>部署</th><th>人数</th><th>予算</th></tr>
          </thead>
          <tbody>
            <tr><td>営業部</td><td>18</td><td>¥3.2M</td></tr>
            <tr><td>開発部</td><td>24</td><td>¥5.1M</td></tr>
            <tr><td>総務部</td><td>9</td><td>¥1.4M</td></tr>
          </tbody>
        </table>

CSS

.d05-11-04-table{
          border-collapse:collapse;
          font-size:11px;
          width:100%;
        }
        .d05-11-04-table th{
          background:#2b2f38;
          color:#fff;
          text-align:left;
          padding:8px 12px;
          font-weight:600;
        }
        .d05-11-04-table td{
          padding:8px 12px;
          text-align:left;
          color:#333;
          border-bottom:1px solid #e5e5e5;
        }
        .d05-11-04-table tbody tr:nth-child(odd) td{
          background:#f7f7f8;
        }

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