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

ゼブラ模様の静的データテーブル

行ごとに背景を交互に変えた縞模様の静止テーブル。在庫一覧や商品リストなどの視認性向上に使える。

staticcss

プレビュー

ソースコード

HTML

<table>
          <thead><tr><th>商品名</th><th>在庫</th><th>価格</th></tr></thead>
          <tbody>
            <tr><td>ノートA</td><td>12</td><td>1,200円</td></tr>
            <tr><td>ノートB</td><td>3</td><td>1,500円</td></tr>
            <tr><td>ペンセット</td><td>25</td><td>880円</td></tr>
            <tr><td>ファイル</td><td>7</td><td>420円</td></tr>
            <tr><td>付箋</td><td>18</td><td>300円</td></tr>
          </tbody>
        </table>

CSS

.d05-10-04 table{width:100%;border-collapse:collapse;font-size:11px;font-family:sans-serif}
        .d05-10-04 th,.d05-10-04 td{padding:6px 8px;text-align:left;border-bottom:1px solid #eee}
        .d05-10-04 thead th{background:#3b4a6b;color:#fff;font-weight:600}
        .d05-10-04 tbody tr:nth-child(odd){background:#f4f5f8}
        .d05-10-04 tbody tr:nth-child(even){background:#fff}
        .d05-10-04 td:nth-child(2),.d05-10-04 td:nth-child(3){text-align:right}

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