CSS | テーブルの背景色を変更する方法

2023-05-282023-06-07CSS テーブル,CSS

CSSでテーブルの背景色を変更する方法とサンプルコードを紹介しています。

テーブルの背景色を変更する

See the Pen CSS | Overlap Table borders by yochans (@yochans) on CodePen.

<table>
	<thead>
		<tr>
			<th>name</th>
			<th>Value</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Apple</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Banana</td>
			<td>100</td>
		</tr>
		<tr>
			<td>Pine</td>
			<td>100</td>
		</tr>
	</tbody>
</table>

テーブル全体の背景色を変更する場合。

table {
	/* テーブル全体の背景色 */
	background-color: #FFF000;
}

見出し部分の背景色を変更する場合。

th {
	/* 見出し部分の背景色 */
	background-color: #FFF000;
}

tr内の背景色を変更する場合。

tr {
	/* 各行の背景色 */
	background-color: #FFF000;
}

セルの部分の背景色を変更する場合。

td {
	/* セルの背景色 */
	background-color: #FFF888;
}

行毎で交互に背景色を変更する場合は以下のように指定する事ができます。

tr:nth-child(even) {
	background: #add8e6;
}

tr:nth-child(odd) {
	background: #e0ffff;
}

特定の行だけ背景色を変更する場合。

tr:nth-child(3) {
	background: #add8e6;
}

列毎の交互の背景色を変更する場合。

td:nth-child(even) {
	background: #add8e6;
}

td:nth-child(odd) {
	background: #e0ffff;
}

特定の列にあるセルの背景色を変更する場合。

td:nth-child(1) {
	background: #add8e6;
}