WordPress Blog（QooQ）に使っているCSSたち（３）〜表（table）〜

「WordPress Blog（QooQ）に使っているCSSたち（１）〜CSS追加方法と全体像〜」の続き

表（table）

表の部分について

CSSは以下の通り

/*表*/
table {
    width: 100%;
    border-collapse: collapse;
}
table, td, th{
    padding: 10px 0;
    text-align: center;
    border: 1px solid #212121;
}
tr:nth-child(even) {
  background: #bdbdbd;
}

HTML例は以下の通り

<table>
    <tr>
        <th>項目１</th>
        <th>項目２</th>
        <th>項目３</th>
		<th>項目４</th>
    </tr>
    <tr>
        <td>A</td>
        <td>ほげほげ</td>
        <td>ふがふが</td>
		<td>げろげろ</td>
    </tr>
    <tr>
        <td>B</td>
        <td>ぼけぼけ</td>
        <td>ぷかぷか</td>
		<td>けろけろ</td>
    </tr>
    <tr>
        <td>C</td>
        <td>ぽけぽけ</td>
        <td>ぶかぶか</td>
		<td>げこげこ</td>
    </tr>
</table>

表示例は以下の通り

「border-collapse: collapse」と指定することで、表の線が一本となる
（デフォルトは二重線）

「tr:nth-child(even)」で偶数行に装飾をすることができる

参考：【コピペOK】CSSだけで実装できるおしゃれテーブルデザイン10つ