CSSでテーブルに縦縞（ストライプ）を追加する方法

CSS

2024.10.21

テーブルに縦の縞模様を適用することで、行や列を視覚的に区別しやすくすることができます。

ここでは、CSSを使用して、テーブルの列に縦縞模様を設定する方法を紹介します。

1. 基本的な縦縞の設定
1. 例: テーブルの偶数列に縦縞を設定
2. 説明:
2. 奇数列に縦縞を設定する
3. 特定の列に縦縞を設定する
1. 例: 2列目だけに縦縞を設定
4. テーブルヘッダー（<th>）も縦縞にする
1. 例: ヘッダーとデータセル両方に縦縞を適用
5. カスタムカラーで縦縞を設定する
1. 例: 複数の色を交互に適用
まとめ

1. 基本的な縦縞の設定

CSSの nth-child() セレクタを使って、テーブルの列に縦縞を設定することができます。

例: テーブルの偶数列に縦縞を設定

以下のコードでは、テーブルの偶数列（2列目、4列目など）に背景色を設定して、縦縞を実現します。

<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: 8px;
    text-align: center;
  }

  /* 偶数列に背景色を設定 */
  td:nth-child(even) {
    background-color: #f2f2f2; /* 縦縞の色 */
  }
</style>

説明:

td:nth-child(even) は偶数列に対してCSSを適用するセレクタです。
background-color: #f2f2f2; は偶数列に薄い背景色を設定することで縦縞を作ります。

2. 奇数列に縦縞を設定する

偶数列ではなく、奇数列に縦縞を設定したい場合は、nth-child(odd) を使用します。

td:nth-child(odd) {
    background-color: #e0e0e0; /* 奇数列に背景色を設定 */
}

3. 特定の列に縦縞を設定する

もし特定の列（例えば、2列目や3列目）だけに縦縞を適用したい場合、nth-child() セレクタでその列番号を指定できます。

例: 2列目だけに縦縞を設定

td:nth-child(2) {
    background-color: #d3d3d3; /* 2列目に縦縞を適用 */
}

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

テーブルヘッダーにも同じように縦縞を適用したい場合、th セレクタにも同様のスタイルを設定します。

例: ヘッダーとデータセル両方に縦縞を適用

th:nth-child(even), td:nth-child(even) {
    background-color: #f2f2f2; /* 偶数列のヘッダーとデータセルに背景色を設定 */
}

5. カスタムカラーで縦縞を設定する

縦縞の色を複数のカスタムカラーにしたい場合、CSSの nth-child(n) を使って異なる列に異なる色を適用できます。

例: 複数の色を交互に適用

td:nth-child(2) {
    background-color: #ffcccc; /* 2列目の色 */
}

td:nth-child(4) {
    background-color: #ccffcc; /* 4列目の色 */
}

td:nth-child(6) {
    background-color: #ccccff; /* 6列目の色 */
}