nakaty
1/7/2018 - 12:11 PM

1行おきに色が違うテーブル

1行おきに色が違うテーブル

table#table01 {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 20px;
    border-collapse: collapse;
    border: solid 3px #fff;
}
table#table01 tr th {
    width: 12em;
    text-align: left;
    white-space: nowrap;
    padding: 5px 0 5px 15px;
    background: #e2f3fb;
    border-bottom: solid 3px #fff;
}
table#table01 tr td {
    text-align: left;
    padding: 5px 0 5px 15px;
    background: #e2f3fb;
    border-bottom: solid 3px #fff;
    border-left: solid 3px #fff;
}
table#table01 tr:nth-child(2n) th {
    background: #f0f7fb;
}
table#table01 tr:nth-child(2n) td {
    background: #f0f7fb;
}
<table id="table01">
    <tr>
        <th>運営会社</th>
        <td>○○株式会社</td>
    </tr>
    <tr>
        <th>事務所所在地</th>
        <td>○○県△△市</td>
    </tr>
    <tr>
        <th>公式URL</th>
        <td>http://www..........</td>
    </tr>
    <tr>
        <th>電話番号</th>
        <td>00-0000-0000</td>
    </tr>
    <tr>
        <th>メールアドレス</th>
        <td>・・・@・・・.・・</td>
    </tr>
    <tr>
        <th>スタッフ数</th>
        <td>20人</td>
    </tr>
    <tr>
        <th>開業年月</th>
        <td>○○年△月 (✕年目)</td>
    </tr>
    <tr>
        <th>国土交通省の承認登録</th>
        <td>有 or 無</td>
    </tr>
</table>