パーツ番号 10-15-10 ・ CSSのみ

比較表形式の求人カード

項目名と内容を行ごとに並べた比較しやすいテーブル形式の求人カードです。複数求人の条件を並べて見比べる一覧ページに向きます。

staticcss

プレビュー

ソースコード

HTML

<table class="jtable">
          <tbody>
            <tr><th>職種</th><td>総務事務</td></tr>
            <tr><th>給与</th><td>月給 21万円〜</td></tr>
            <tr><th>勤務地</th><td>愛知県名古屋市</td></tr>
            <tr><th>雇用形態</th><td>契約社員</td></tr>
          </tbody>
        </table>

CSS

.d10-15-10 .jtable{width:240px;border-collapse:collapse;background:#fff;border:1px solid #e6e6e6;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);font-size:12px;}
        .d10-15-10 .jtable th,.d10-15-10 .jtable td{padding:8px 10px;text-align:left;border-bottom:1px solid #eee;}
        .d10-15-10 .jtable tr:last-child th,.d10-15-10 .jtable tr:last-child td{border-bottom:none;}
        .d10-15-10 .jtable th{width:70px;color:#888;font-weight:600;background:#fafafa;}
        .d10-15-10 .jtable td{color:#222;font-weight:600;}

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