rowspanを指定してるtableの行をホバーした時にcssで同じ行の背景色を変更する方法

テーブルでtdにrowspanを指定している時に、CSSで行のホバーで同じ行の背景色を変更する方法をご紹介します。

言葉での説明では分かりにくいので、画像を見てもらった方が理解できると思います。

イメージ画像

コード

rowspan="2"の場合

<table border="1">
  <tbody>
    <tr>
      <td rowspan="3">1行目</td>
      <td rowspan="3">1行目</td>
      <td>1行目</td>
    </tr>
    <tr>
      <td>1行目</td>
    </tr>
    <tr>
      <td>1行目</td>
    </tr>
    <tr>
      <td rowspan="3">2行目</td>
      <td rowspan="3">2行目</td>
      <td>2行目</td>
    </tr>
    <tr>
      <td>2行目</td>
    </tr>
    <tr>
      <td>2行目</td>
    </tr>
  </tbody>
</table>

奇数行をホバーした時はその行とひとつ下の行を指定して
偶数行をホバーした時はその行とひとつ上の行を指定するようにしています。

table {
  width: 300px;
  border-collapse: separate;

  /* 奇数行のtrをホバー */
  tr:nth-child(odd):hover,
  /* 奇数行のtrをホバーした時のひとつ下の兄弟のtr */
  tr:nth-child(odd):hover + tr,
  /* 偶数行のtrをホバー */
  tr:nth-child(even):hover,
  /* 偶数行のtrをホバーしたときのひとつ上の兄弟のtr */
  tr:has(+ tr:nth-child(even):hover) {
    background-color: #ffffaa;
  }
}

rowspan="3"の場合

<table border="1">
  <tbody>
    <tr>
      <td rowspan="3">1行目</td>
      <td rowspan="3">1行目</td>
      <td>1行目</td>
    </tr>
    <tr>
      <td>1行目</td>
    </tr>
    <tr>
      <td>1行目</td>
    </tr>
    <tr>
      <td rowspan="3">2行目</td>
      <td rowspan="3">2行目</td>
      <td>2行目</td>
    </tr>
    <tr>
      <td>2行目</td>
    </tr>
    <tr>
      <td>2行目</td>
    </tr>
  </tbody>
</table>

考え方はrowspan="2"と同じで3n + 1のように指定方法が変わっただけです。

table {
  width: 300px;
  border-collapse: separate;

  /* 3n+1行のtrをホバー */
  tr:nth-child(3n + 1):hover,
  /* 3n+1行のtrをホバーした時のひとつ下の兄弟のtr */
  tr:nth-child(3n + 1):hover + tr,
  /* 3n+1行のtrをホバーした時のふたつ下の兄弟のtr */
  tr:nth-child(3n + 1):hover + tr + tr,

  /* 3n+2行のtrをホバー */
  tr:nth-child(3n + 2):hover,
  /* 3n+2行のtrをホバーしたときのひとつ上の兄弟のtr */
  tr:has(+ tr:nth-child(3n + 2):hover),
  /* 3n+2行のtrをホバーした時のひとつ下の兄弟のtr */
  tr:nth-child(3n + 2):hover + tr,

  /* 3n行のtrをホバー */
  tr:nth-child(3n):hover,
  /* 3n行のtrをホバーしたときのひとつ上の兄弟のtr */
  tr:has(+ tr:nth-child(3n):hover),
  /* 3n行のtrをホバーしたときのふたつ上の兄弟のtr */
  tr:has(+ tr + tr:nth-child(3n):hover) {
    background-color: #ffffaa;
  }
}

まとめ

テーブルでrowspanを指定している時にCSSでホバーで同じ行の背景色を変更する方法をご紹介しました。rowspan="3"やrowspan="4"も同じ方法で実装できますが、CSSの記述量がかなり増えるため、その場合はJavaScriptを使用した方が良いかもしれません。

最後に

GoQSystemでは一緒に働いてくれる仲間を募集中です！

ご興味がある方は以下リンクよりご確認ください。