CSSでテーブルの奇数列にスタイルを適用する方法

CSS

2024.10.23

CSSでテーブルに縞模様を設定することで、視認性の高いデザインを作成することができます。

特に奇数列にスタイルを適用することで、データの列同士が視覚的に区別しやすくなり、テーブルの読みやすさが向上します。

この記事では、CSSを使ってテーブルの奇数列にスタイルを適用する方法を解説します。

方法
まとめ

方法

テーブルの奇数列に特定のスタイルを適用するには、CSSの nth-child() セレクタを使用します。

このセレクタを使えば、奇数列に背景色やボーダー、フォントスタイルを簡単に適用できます。

1. nth-child() セレクタで奇数列にスタイルを適用する

nth-child() セレクタを使って、テーブルの奇数列（1列目、3列目、5列目など）にスタイルを適用します。

nth-child(odd) を使用することで、奇数の列に特定のスタイルを追加できます。

例: 奇数列に背景色を適用

<table>
  <tr>
    <td>セル1</td>
    <td>セル2</td>
    <td>セル3</td>
    <td>セル4</td>
  </tr>
  <tr>
    <td>セル5</td>
    <td>セル6</td>
    <td>セル7</td>
    <td>セル8</td>
  </tr>
</table>

<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }

  td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
  }

  /* 奇数列に背景色を適用 */
  td:nth-child(odd) {
    background-color: #f2f2f2;
  }
</style>

説明:

td:nth-child(odd):
奇数列にスタイルを適用するセレクタ。odd は1列目、3列目、5列目などの奇数列に適用されます。
background-color: #f2f2f2;
奇数列に薄いグレーの背景色を設定。

2. 偶数列と組み合わせて交互にスタイルを適用する

奇数列だけでなく、偶数列にも別のスタイルを適用することで、交互に異なる色を設定できます。

例: 奇数列と偶数列に異なる背景色を適用

td:nth-child(odd) {
  background-color: #f2f2f2; /* 奇数列の背景色 */
}

td:nth-child(even) {
  background-color: #ffffff; /* 偶数列の背景色 */
}

3. 特定の列にスタイルを適用する

特定の列にだけスタイルを適用したい場合は、nth-child() を使ってその列番号を指定します。

例: 1列目にスタイルを適用

td:nth-child(1) {
  background-color: #d3d3d3; /* 1列目に背景色を適用 */
}

4. テーブルヘッダー（<th>）にも適用する

テーブルのヘッダー行（<th>）に対しても同じ方法でスタイルを適用できます。

ヘッダーに奇数列と偶数列で異なるスタイルを適用する場合も、nth-child() セレクタを使用します。

例: ヘッダーにもスタイルを適用

th:nth-child(odd), td:nth-child(odd) {
  background-color: #f2f2f2; /* 奇数列の背景色 */
}

th:nth-child(even), td:nth-child(even) {
  background-color: #ffffff; /* 偶数列の背景色 */
}