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

縞模様データテーブル

ゼブラ模様と行ホバーで視認性を高めた汎用テーブル。WordPressの実績一覧や履歴表示に幅広く使える。

hovercss

プレビュー

ソースコード

HTML

<table class="d05-02-05-tbl">
          <thead><tr><th>日付</th><th>プラン</th><th>状態</th><th>金額</th></tr></thead>
          <tbody>
            <tr><td>07/01</td><td>スタンダード</td><td>完了</td><td>¥980</td></tr>
            <tr><td>06/01</td><td>スタンダード</td><td>完了</td><td>¥980</td></tr>
            <tr><td>05/01</td><td>プロ</td><td>完了</td><td>¥2,980</td></tr>
            <tr><td>04/01</td><td>プロ</td><td>完了</td><td>¥2,980</td></tr>
            <tr><td>03/01</td><td>フリー</td><td>—</td><td>¥0</td></tr>
          </tbody>
        </table>

CSS

.d05-02-05-tbl{border-collapse:collapse;width:100%;font-size:11px}
        .d05-02-05-tbl th,.d05-02-05-tbl td{padding:8px 8px;text-align:left}
        .d05-02-05-tbl thead th{background:#6366f1;color:#fff;font-weight:700}
        .d05-02-05-tbl tbody tr:nth-child(even){background:#f1f5f9}
        .d05-02-05-tbl tbody tr{transition:background .2s}
        .d05-02-05-tbl tbody tr:hover{background:#e0e7ff}
        .d05-02-05-tbl td:last-child{text-align:right;font-weight:700;color:#374151}

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