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

横罫線のみテーブル

縦線を排し行区切りの横線だけで構成した表組み。日次レポートや売上一覧など縦に長いデータの見やすさを優先した表示に使う。

staticcss

プレビュー

ソースコード

HTML

<table class="d05-11-03-table">
          <thead>
            <tr><th>日付</th><th>売上</th><th>客数</th></tr>
          </thead>
          <tbody>
            <tr><td>7/1</td><td>¥88,000</td><td>42</td></tr>
            <tr><td>7/2</td><td>¥92,500</td><td>47</td></tr>
            <tr><td>7/3</td><td>¥76,300</td><td>38</td></tr>
            <tr><td>7/4</td><td>¥101,200</td><td>53</td></tr>
          </tbody>
        </table>

CSS

.d05-11-03-table{
          border-collapse:collapse;
          font-size:11px;
          width:100%;
        }
        .d05-11-03-table th{
          text-align:left;
          padding:7px 12px;
          border-bottom:1px solid #333;
          font-weight:600;
          color:#111;
        }
        .d05-11-03-table td{
          text-align:left;
          padding:8px 12px;
          border-bottom:1px solid #ddd;
          color:#444;
        }
        .d05-11-03-table tbody tr:last-child td{
          border-bottom:1px solid #333;
        }

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