nth-child(odd)またはnth-child(even)を使用した際のテーブルの列のハイライト方法を知りたい

前提・実現したいこと

cssのみでテーブルのセルにマウスがホバーした際に横・縦をハイライトにしたい

発生している問題・エラーメッセージ

上記画像のようにnth-child(odd)またはnth-child(even)を使用した際
歯抜けのようになってしまいます。

該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta http-equiv="X-UA-Compatible" content="IE=edge">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>ストライプテーブル -cssのみ</title>
8  <link rel="stylesheet" href="css/common.css">
9</head>
10<body>
11  <table>
12    <thead>
13      <tr>
14        <th>見出し１</th>
15        <th>見出し２</th>
16        <th>見出し３</th>
17      </tr>
18    </thead>
19    <tbody>
20      <tr>
21        <td>データ１</td>
22        <td>データ２</td>
23        <td>データ３</td>
24      </tr>
25      <tr>
26        <td>データ４</td>
27        <td>データ５</td>
28        <td>データ６</td>
29      </tr>
30      <tr>
31        <td>データ７</td>
32        <td>データ８</td>
33        <td>データ９</td>
34      </tr>
35      <tr>
36        <td>データ１０</td>
37        <td>データ１１</td>
38        <td>データ１２</td>
39      </tr>
40      <tr>
41        <td>データ１３</td>
42        <td>データ１４</td>
43        <td>データ１５</td>
44      </tr>
45    </tbody>
46  </table>
47</body>
48</html>

css
1@charset "UTF-8";
2
3table {
4  margin: 50px auto;
5  border-collapse: collapse;
6  overflow: hidden;
7}
8
9th {
10  background: #4f4f4f;
11  color: #fff;
12  width: 100px;
13}
14
15td {
16  text-align: center;
17}
18
19th, td {
20  padding: 5px;
21  border: 1px solid #000;
22  position: relative;
23}
24
25  tr:nth-child(even) {
26  background: #f2f2f2;
27}
28
29tr:hover {
30  background: #5981a8;
31}
32
33tr:hover {
34  background: #5981a8;
35}
36
37td:hover::after {
38  content: "";
39  background: #5981a8;
40  width: 100%;
41  height: 200vh;
42  position: absolute;
43  top: -100vh;
44  left: 0;
45  z-index: -1;
46}
47
48

試したこと

その１
nth-childに対してz-indexの重なり順を変更

css
1tr:nth-child(even) {
2  background: #f2f2f2;
3  position: relative;
4  z-index: -2; 
5}

変化はありませんでした

その2
thとtdに対してz-indexの重なり順を変更

css
1th, td {
2  padding: 5px;
3  border: 1px solid #000;
4  position: relative;
5  z-index: 0;
6}

下記の様になってしまいます。

つたない説明で申し訳ありませんが
もしcssのみで可能なのであればご教授お願い致します。

補足情報（FW/ツールのバージョンなど）

端末：Windows10 Home
テキストエディタ：VS Code
ブラウザ：Chrome

行動規範の内容に同意します

回答1件

ベストアンサー

惜しい感じですね。CSSに親要素のセレクタがない以上、tdを起点として他行のtrに設定されたbackgroudを変えることはできません。
そこで、trのストライプ背景色自体もtd:hover::afterと同じ考え方で設定し、z-indexの重なり順で上書きしてみました。

CSS
1
2table {
3  margin: 50px auto;
4  border-collapse: collapse;
5  overflow: hidden;
6}
7
8th {
9  background: #4f4f4f;
10  color: #fff;
11  width: 100px;
12}
13
14td {
15  text-align: center;
16}
17
18th, td {
19  padding: 5px;
20  border: 1px solid #000;
21  position: relative;
22}
23
24tr:nth-child(even) td::before {
25  content: "";
26  background: #f2f2f2;
27  width: 200vw;
28  height: 100%;
29  position: absolute;
30  top: 0;
31  left: -100vw;
32  z-index: -2;
33}
34
35tr:hover {
36  background: #5981a8;
37}
38
39td:hover::after {
40  content: "";
41  background: #5981a8;
42  width: 100%;
43  height: 200vh;
44  position: absolute;
45  top: -100vh;
46  left: 0;
47  z-index: -1;
48}