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

全罫線囲みテーブル

全セルを罫線で囲んだクラシックな表組みスタイル。業務資料や進行管理表など枠線がはっきりした一覧に適する。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-11-02-table">
          <thead>
            <tr><th>項目</th><th>担当</th><th>状態</th></tr>
          </thead>
          <tbody>
            <tr><td>設計書</td><td>佐藤</td><td>完了</td></tr>
            <tr><td>実装</td><td>鈴木</td><td>進行中</td></tr>
            <tr><td>検証</td><td>田中</td><td>未着手</td></tr>
          </tbody>
        </table>

CSS

.d05-11-02-table{
          border-collapse:collapse;
          font-size:11px;
          width:100%;
          border:1px solid #999;
        }
        .d05-11-02-table th,
        .d05-11-02-table td{
          border:1px solid #999;
          padding:7px 10px;
          text-align:left;
        }
        .d05-11-02-table th{
          background:#f2f2f2;
          font-weight:600;
          color:#222;
        }
        .d05-11-02-table td{
          color:#333;
        }

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