CSSでテーブルの先頭行(1行目)のスタイルを変更する - CSS3の擬似クラスを利用してヘッダのスタイルを変更する - CSS
CSS3の擬似クラスを利用してヘッダのスタイルを変更するコードを紹介します。
ヘッダのスタイルを変更するには、CSSでテーブルの先頭行(1行目)のスタイルを指定します。
概要
CSSでテーブルの特定の行のスタイルを指定する場合は、
tr:nth-child((行番号))
の書式を用います。
実際の利用ではテーブルの制約やセルの書式を指定するため
.(テーブルのクラス) tr:nth-child(1) td
や
#(テーブルのID) tr:nth-child(1) td
といった書式になります。
コード
スタイルシート (HeaderStyle.css)
.HeaderTable {
border-collapse:collapse;
}
.HeaderTable tr:nth-child(1) {
background-color:#0094ff;
}
.HeaderTable tr:nth-child(1) td {
color:white;
}
.HeaderTable tr td {
border: 1px solid #0094ff;
}
HTMLファイル (CssHeaderTable.html)
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<link rel="stylesheet" type="text/css" href="HeaderStyle.css" />
</head>
<body>
<table class="HeaderTable">
<tr>
<td>品名</td>
<td>単価</td>
<td>個数</td>
</tr>
<tr>
<td>トルクスねじ 15-AB</td>
<td>0.25</td>
<td>1000</td>
</tr>
<tr>
<td>2重リング R-13S</td>
<td>0.5</td>
<td>100</td>
</tr>
<tr>
<td>四角プラグ</td>
<td>0.4</td>
<td>500</td>
</tr>
</table>
</body>
</html>
解説
CSSセレクタの後ろに ":nth-child(n)" を記述することで要素のn番目のスタイルを設定できます。今回の例では、テーブルのtrに":nth-child(1)" を記述し、background-colorを指定することにより1行目の背景色を設定しています。
また、".HeaderTable tr:nth-child(1) td"と記述することでテーブルの1番目のtrタグ内のtdタグのスタイルを設定できます。colorスタイルを設定することで、文字の色を変更しています。
実行結果
HTMLの表示結果は下図となります。テーブルの一行目の背景色と文字色が変更されています。
著者
iPentecのメインデザイナー
Webページ、Webクリエイティブのデザインを担当。PhotoshopやIllustratorの作業もする。
