CSSのみを使ったtableでの設問レイアウトの実装について

実現したいこと

テーブルレイアウトを用いて設問を作り、表頭・表側から重なり合ったセルを選ぶレイアウトとして
以下の構成をCSSのみでの実現ができないか考えています。

	A0	A1	A2	A3
B0		表頭１	表頭２	表頭３
B1	表側１	●	○	○
B2	表側２	○	○	○
B3	表側３	○	○	○
B4	表側４	○	○	○

表頭（A1）、表側（B１）をポイントした時、Ａ１列、Ｂ１行に背景色が付き、ポイント箇所が分かり、且つ、そのセル（図中●含むセル）をホバーした時、セルの背景色が変わる。
テーブル全体に背景色がついても１．の効果は優先される。
表頭に背景色を指定しても１．の効果は優先される。
表側に背景色を指定しても１．の効果は優先される。

発生している問題・分からないこと

３と４の結果が得られない

表頭と表側に背景色を指定してしまうとポイントしたときの背景色が表頭と表側の背景色で打ち消されてしまう。

該当のソースコード

HTML
1<table id="hage" class="matrix">
2    <tbody>
3        <tr>
4            <td></td>
5            <td class="fm-x">
6                <span>Ａああああああああああああああ</span>
7            </td>
8            <td class="fm-x">
9                <span>Ｂあいいいいいいいいいいいい</span>
10            </td>
11            <td class="fm-x">
12                <span>Ｃううううううううううううう</span>
13            </td>
14            <td class="fm-x">
15                <span>いいいいいいいいいいい</span>
16            </td>
17            <td class="fm-x">
18                <span>っっっっっっっっっっｇ</span>
19            </td>
20        </tr>
21        <tr>
22            <td class="fm-y">
23                <span>1あああああああああああ</span>
24            </td>
25            <td class="fm-cell">
26                <label>
27                    <input name="hoge" id="hoge_1_1" type="radio" value="0">
28                    <span></span>
29                </label>
30            </td>
31            <td class="fm-cell">
32                <label>
33                    <input name="hoge" id="hoge_1_2" type="radio" value="4">
34                    <span></span>
35                </label>
36            </td>
37            <td class="fm-cell">
38                <label>
39                    <input name="hoge" id="hoge_1_3" type="radio" value="8">
40                    <span></span>
41                </label>
42            </td>
43            <td class="fm-cell">
44                <label>
45                    <input name="hoge" id="hoge_1_4" type="radio" value="12">
46                    <span></span>
47                </label>
48            </td>
49            <td class="fm-cell">
50                <label>
51                    <input name="hoge" id="hoge_1_5" type="radio" value="16">
52                    <span></span>
53                </label>
54            </td>
55        </tr>
56        <tr>
57            <td class="fm-y">
58                <span>2いいいいいいいいいいいいいい</span>
59            </td>
60            <td class="fm-cell">
61                <label>
62                    <input name="hoge" id="hoge_1_1" type="radio" value="0">
63                    <span></span>
64                </label>
65            </td>
66            <td class="fm-cell">
67                <label>
68                    <input name="hoge" id="hoge_1_2" type="radio" value="4">
69                    <span></span>
70                </label>
71            </td>
72            <td class="fm-cell">
73                <label>
74                    <input name="hoge" id="hoge_1_3" type="radio" value="8">
75                    <span></span>
76                </label>
77            </td>
78            <td class="fm-cell">
79                <label>
80                    <input name="hoge" id="hoge_1_4" type="radio" value="12">
81                    <span></span>
82                </label>
83            </td>
84            <td class="fm-cell">
85                <label>
86                    <input name="hoge" id="hoge_1_5" type="radio" value="16">
87                    <span></span>
88                </label>
89            </td>
90        </tr>
91        <tr>
92            <td class="fm-y">
93                <span>3うううううううううううううううううう</span>
94            </td>
95            <td class="fm-cell">
96                <label>
97                    <input name="hoge" id="hoge_1_1" type="radio" value="0">
98                    <span></span>
99                </label>
100            </td>
101            <td class="fm-cell">
102                <label>
103                    <input name="hoge" id="hoge_1_2" type="radio" value="4">
104                    <span></span>
105                </label>
106            </td>
107            <td class="fm-cell">
108                <label>
109                    <input name="hoge" id="hoge_1_3" type="radio" value="8">
110                    <span></span>
111                </label>
112            </td>
113            <td class="fm-cell">
114                <label>
115                    <input name="hoge" id="hoge_1_4" type="radio" value="12">
116                    <span></span>
117                </label>
118            </td>
119            <td class="fm-cell">
120                <label>
121                    <input name="hoge" id="hoge_1_5" type="radio" value="16">
122                    <span></span>
123                </label>
124            </td>
125        </tr>
126        <tr>
127            <td class="fm-y">
128                <span>4ええええええええええええええええええええ</span>
129            </td>
130            <td class="fm-cell">
131                <label>
132                    <input name="hoge" id="hoge_1_1" type="radio" value="0">
133                    <span></span>
134                </label>
135            </td>
136            <td class="fm-cell">
137                <label>
138                    <input name="hoge" id="hoge_1_2" type="radio" value="4">
139                    <span></span>
140                </label>
141            </td>
142            <td class="fm-cell">
143                <label>
144                    <input name="hoge" id="hoge_1_3" type="radio" value="8">
145                    <span></span>
146                </label>
147            </td>
148            <td class="fm-cell">
149                <label>
150                    <input name="hoge" id="hoge_1_4" type="radio" value="12">
151                    <span></span>
152                </label>
153            </td>
154            <td class="fm-cell">
155                <label>
156                    <input name="hoge" id="hoge_1_5" type="radio" value="16">
157                    <span></span>
158                </label>
159            </td>
160        </tr>
161    </tbody>
162</table>

CSS
1.fm-matrix{
2    border-collapse: collapse !important;
3}
4
5.fm-matrix td.fm-x span{
6    -webkit-white-space: nowrap;
7    white-space: nowrap;
8    -ms-writing-mode: tb-lr;
9    writing-mode: vertical-lr;
10    word-wrap: break-word;
11    overflow-wrap: break-word;
12}
13
14.fm-matrix td.fm-x{
15    vertical-align: top;
16    border-top: none !important;
17    border-bottom: none !important;
18    border-right: none !important;
19    z-index: 100;
20    position: relative;
21}
22
23.fm-matrix td.fm-y{
24    padding:8px 15px 10px 0;
25    word-wrap: break-word;
26    border-bottom: none !important;
27    border-left: none !important;
28    border-right: none !important;
29    margin-top: -1px;
30}
31
32.fm-matrix tr:not(:first-child):hover {
33    background-color: #f3f8ff;
34    z-index: 0;
35    position: relative;
36}
37
38.fm-matrix td.fm-cell{
39    border-bottom: none !important;
40    border-right: none !important;
41    position: relative;
42}
43
44
45.fm-matrix td.fm-cell:hover{
46    background-color: #c2daff;
47}
48
49.fm-matrix td.fm-cell:hover::after {
50    background-color: #f3f8ff;
51}
52
53.fm-matrix td.fm-cell:hover::after{
54    content: "";
55    position: absolute;
56    top: -100vh;
57    left: 0;
58    width: 100%;
59    height: 200vh;
60    z-index: -1;
61}

試したこと・調べたこと

teratailやGoogle等で検索した
ソースコードを自分なりに変更した
知人に聞いた
その他

上記の詳細・結果

表頭と表側に背景色を指定してしまうとポイントしたときの背景色が表頭と表側の背景色で打ち消されてしまう。

補足

【一旦の想定形】
下図のようにユーザーがどの設問のラジオボタンを選択するか
視覚的にわかりやすいようにすることを想定しています。

どのラジオボタンを選択しようとしているかhoverで背景色が付く（青）

CSS
1.fm-matrix td.fm-cell:hover{
2    background-color: #c2daff;
3}

2.そのラジオボタンがどの表頭と表側にあたるものなのかを示すために背景色が付く

CSS
1.fm-matrix td.fm-x{
2    vertical-align: top;
3    border-top: none !important;
4    border-bottom: none !important;
5    border-right: none !important;
6    z-index: 100;/*表頭の文字を視認するための指定。z-indexで最上位にしておかないと文字が見えなくなる*/
7    position: relative;
8}
9
10.fm-matrix tr:not(:first-child):hover {
11    background-color: #f3f8ff;
12    z-index: 0;
13    position: relative;
14}
15
16.fm-matrix td.fm-cell{
17    border-bottom: none !important;
18    border-right: none !important;
19    position: relative;/*::afterのabsoluteを指定するため*/
20}
21
22.fm-matrix td.fm-cell:hover::after {
23    background-color: #f3f8ff;
24}
25
26.fm-matrix td.fm-cell:hover::after{
27    content: "";
28    position: absolute;
29    top: -100vh;/*fm-cellからの位置調整*/
30    left: 0;
31    width: 100%;
32    height: 200vh;/*高さ（表頭からの長さ）*/
33    z-index: -1;/*この指定をつけることで「背景」として表示される*/
34}

【現在の問題】
表頭と表側に背景色を指定してしまうと「どの表頭と表側にあたるものなのかを示すための背景色」が表示されなくなってしまう。

Lhankor_Mhy

2024/09/25 10:00

Markdown がテーブルに対応してますので、記述し直してほしいな、と思いました。質問の解読に苦戦中です。 https://teratail.com/help#about-markdown

Lhankor_Mhy

2024/09/25 10:05

補足願います。『ポイントした』とは、この場合どういう意味ですか？　クリックやホバーとは違う感じですか？

netuser

2024/09/25 10:27

Lhankor_Mhyさまコメントありがとうございます。取り急ぎ、補足に対しての回答ですが「ポイントした」というのはホバーをしたと同義に捉えていただいてください。わかりにくい書き方で申し訳ありません。引き続きよろしくお願い致します。

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

回答1件

ベストアンサー

1の解釈の仕方が複数あると思うのですが、『表頭（A1）、表側（B１）をポイントした時、Ａ１列、Ｂ１行に背景色が付き、ポイント箇所が分かり』、且つ、『そのセル（図中●含むセル）をホバーした時、セルの背景色が変わる。』と読むのであれば、こうでしょうか。

html
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="UTF-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1.0">
7  <title>Document</title>
8  <style>
9    table {
10      background-color: ivory;
11    }
12
13    .fm-x,
14    .fm-y {
15      background-color: wheat;
16    }
17
18
19    .fm-y:hover {
20      background-color: darkorange;
21
22      tr:has(&) .fm-cell {
23        background-color: gold;
24      }
25    }
26
27    .fm-x:hover {
28      background-color: darkorange;
29
30      tbody:has(&:nth-child(2)) .fm-cell:nth-child(2),
31      tbody:has(&:nth-child(3)) .fm-cell:nth-child(3),
32      tbody:has(&:nth-child(4)) .fm-cell:nth-child(4),
33      tbody:has(&:nth-child(5)) .fm-cell:nth-child(5),
34      tbody:has(&:nth-child(6)) .fm-cell:nth-child(6) {
35        background-color: gold;
36      }
37    }
38
39    .fm-cell:hover {
40      background-color: tomato;
41    }
42  </style>
43</head>
44
45<body>
46
47  <table id="hage" class="matrix">
48    <tbody>
49      <tr>
50        <td></td>
51        <td class="fm-x">
52          <span>Ａああああああああああああああ</span>
53        </td>
54        <td class="fm-x">
55          <span>Ｂあいいいいいいいいいいいい</span>
56        </td>
57        <td class="fm-x">
58          <span>Ｃううううううううううううう</span>
59        </td>
60        <td class="fm-x">
61          <span>いいいいいいいいいいい</span>
62        </td>
63        <td class="fm-x">
64          <span>っっっっっっっっっっｇ</span>
65        </td>
66      </tr>
67      <tr>
68        <td class="fm-y">
69          <span>1あああああああああああ</span>
70        </td>
71        <td class="fm-cell">
72          <label>
73            <input name="hoge" id="hoge_1_1" type="radio" value="0">
74            <span></span>
75          </label>
76        </td>
77        <td class="fm-cell">
78          <label>
79            <input name="hoge" id="hoge_1_2" type="radio" value="4">
80            <span></span>
81          </label>
82        </td>
83        <td class="fm-cell">
84          <label>
85            <input name="hoge" id="hoge_1_3" type="radio" value="8">
86            <span></span>
87          </label>
88        </td>
89        <td class="fm-cell">
90          <label>
91            <input name="hoge" id="hoge_1_4" type="radio" value="12">
92            <span></span>
93          </label>
94        </td>
95        <td class="fm-cell">
96          <label>
97            <input name="hoge" id="hoge_1_5" type="radio" value="16">
98            <span></span>
99          </label>
100        </td>
101      </tr>
102      <tr>
103        <td class="fm-y">
104          <span>2いいいいいいいいいいいいいい</span>
105        </td>
106        <td class="fm-cell">
107          <label>
108            <input name="hoge" id="hoge_1_1" type="radio" value="0">
109            <span></span>
110          </label>
111        </td>
112        <td class="fm-cell">
113          <label>
114            <input name="hoge" id="hoge_1_2" type="radio" value="4">
115            <span></span>
116          </label>
117        </td>
118        <td class="fm-cell">
119          <label>
120            <input name="hoge" id="hoge_1_3" type="radio" value="8">
121            <span></span>
122          </label>
123        </td>
124        <td class="fm-cell">
125          <label>
126            <input name="hoge" id="hoge_1_4" type="radio" value="12">
127            <span></span>
128          </label>
129        </td>
130        <td class="fm-cell">
131          <label>
132            <input name="hoge" id="hoge_1_5" type="radio" value="16">
133            <span></span>
134          </label>
135        </td>
136      </tr>
137      <tr>
138        <td class="fm-y">
139          <span>3うううううううううううううううううう</span>
140        </td>
141        <td class="fm-cell">
142          <label>
143            <input name="hoge" id="hoge_1_1" type="radio" value="0">
144            <span></span>
145          </label>
146        </td>
147        <td class="fm-cell">
148          <label>
149            <input name="hoge" id="hoge_1_2" type="radio" value="4">
150            <span></span>
151          </label>
152        </td>
153        <td class="fm-cell">
154          <label>
155            <input name="hoge" id="hoge_1_3" type="radio" value="8">
156            <span></span>
157          </label>
158        </td>
159        <td class="fm-cell">
160          <label>
161            <input name="hoge" id="hoge_1_4" type="radio" value="12">
162            <span></span>
163          </label>
164        </td>
165        <td class="fm-cell">
166          <label>
167            <input name="hoge" id="hoge_1_5" type="radio" value="16">
168            <span></span>
169          </label>
170        </td>
171      </tr>
172      <tr>
173        <td class="fm-y">
174          <span>4ええええええええええええええええええええ</span>
175        </td>
176        <td class="fm-cell">
177          <label>
178            <input name="hoge" id="hoge_1_1" type="radio" value="0">
179            <span></span>
180          </label>
181        </td>
182        <td class="fm-cell">
183          <label>
184            <input name="hoge" id="hoge_1_2" type="radio" value="4">
185            <span></span>
186          </label>
187        </td>
188        <td class="fm-cell">
189          <label>
190            <input name="hoge" id="hoge_1_3" type="radio" value="8">
191            <span></span>
192          </label>
193        </td>
194        <td class="fm-cell">
195          <label>
196            <input name="hoge" id="hoge_1_4" type="radio" value="12">
197            <span></span>
198          </label>
199        </td>
200        <td class="fm-cell">
201          <label>
202            <input name="hoge" id="hoge_1_5" type="radio" value="16">
203            <span></span>
204          </label>
205        </td>
206      </tr>
207    </tbody>
208  </table>
209</body>
210
211</html>

質問の変更を受けて追記

css
1    @layer base {
2      table {
3        background-color: ivory;
4      }
5
6      .fm-x,
7      .fm-y {
8        background-color: wheat;
9      }
10    }
11
12    .fm-cell {
13      transition: background-color 0.3s;
14    }
15
16    .fm-cell:hover {
17      background-color: tomato;
18    }
19
20    :where(tbody:has(.fm-cell:hover:nth-child(2))) td:nth-child(2),
21    :where(tbody:has(.fm-cell:hover:nth-child(3))) td:nth-child(3),
22    :where(tbody:has(.fm-cell:hover:nth-child(4))) td:nth-child(4),
23    :where(tbody:has(.fm-cell:hover:nth-child(5))) td:nth-child(5),
24    :where(tbody:has(.fm-cell:hover:nth-child(6))) td:nth-child(6) {
25      background-color: gold;
26    }
27
28    :where(tr:has(.fm-cell:hover)) td {
29      background-color: gold;
30    }

投稿2024/09/25 12:17

編集2024/09/26 13:50

Lhankor_Mhy

総合スコア36798

netuser

2024/09/25 14:03

Lhankor_Mhyさま回答をいただき、誠にありがとうございます。ご教授いただいたテーブルでも素晴らしいものではあるのですが、想定イメージをうまく伝えきれておらずに大変失礼いたしました。補足にてよりイメージが伝わりやすいよう、イメージ画像を加えさせていただきました。ご確認を頂けましたら幸いです。

Lhankor_Mhy

2024/09/25 14:05

表頭（A1）や表側（B１）をポイントした時には何もしなくていい、ということでいいですか？

netuser

2024/09/25 14:31

「表頭（A1）や表側（B１）をポイントした時」は正直、考えてはいなかったんですが【想定形】のように背景が付いたらすごくベストだと思いました。

Lhankor_Mhy

2024/09/25 14:39

では、とりあえず削除して追記しますね。

netuser

2024/09/25 14:41

遅い時間にもかかわらず、本当にありがとうございます。どうぞよろしくお願いいたします

Lhankor_Mhy

2024/09/25 14:55

ああ、違いますかね？　表頭と表側の背景色も変えるのかな？

Lhankor_Mhy

2024/09/25 15:01

修正しました。これで大丈夫ですか？

netuser

2024/09/25 15:22

わかりにくい説明の中、修正にご尽力いただきまして本当にありがとうございます。修正後のテーブルを確認させていただきました！想定した板通りの実装です！本当にありがとうございます。ソースをぜひ参考にさせていただきます！本当に本当にありがとうございました！！

netuser

2024/09/25 15:49

回答ありがとうございます。試したところ問題が解決しました！ベストアンサーに選ばせていただきました。

netuser

2024/09/25 16:23

Lhankor_Mhyさま解決の回答後に差し出がましいのですが <style></style>の中の記述をCSSのかたちにしていただくことは可能でしょうか？できましたらよろしくお願いいたします

Lhankor_Mhy

2024/09/26 00:05

styleタグを削除しました。ご要望を読み取れていないかもしれません。その際はコメントでお知らせください。

netuser

2024/09/26 00:38

お世話になっております。当方の実装環境ではsassが使えないため scss記法にしているところをCSSの記述にして頂けると幸いです。非常にお手間をお願いしてしまい申し訳ありませんがどうかよろしくお願い致します

Lhankor_Mhy

2024/09/26 00:51

あ、そういうことでしたら、これは scss ではなくて CSS で書いていますので問題なく使えるはずです。ただ、ブラウザのアップデートを年単位でしていないとかだと、動作しない場合もあるかもしれません。比較的最近実装されたものだと、このあたりでしょうか。 https://caniuse.com/css-cascade-layers https://caniuse.com/css-has https://caniuse.com/css-nesting CSSネストが、一番最近だと思いますので、iOSなどで17にアップデートしてないユーザーだと動作しないと思います。そちらを外した形にしますか？

netuser

2024/09/26 13:01

ご回答ありがとうございますまた回答が遅くなり申し訳ありませんこの度実装をしようとしている本番使用のものは WEBアプリに実装するものでして、利用者に対して汎用性を必要とするものになるんです。ネストなどに対応していないブラウザの利用は通常では考えにくいのですがユーザーファーストの観点から、ご面倒をお願いしてしまい申し訳ありませんが、出来れば平易なCSS記述で行われていると助かります。 Lhankor_Mhyさまにおかれましては解決後にもかかわらず何度ものお願いで申し訳ありませんがどうかよろしくお願い致します。

Lhankor_Mhy

2024/09/26 13:48

ご要望を理解しましたが、:has() を外すことはどうしてもできないので、ご了解ください。前述の通り、CSSネストだけ使わないように書き直しますね。

netuser

2024/09/26 13:51

:hasの件は承知いたしました。どうぞよろしくお願い致します。

netuser

2024/09/27 06:32

Lhankor_Mhyさま CSSの書き換えにご対応いただき、本当に本当にありがとうございました。その後、当方の実装環境でも沿うてイメージ通りの挙動の確認が行えました。それで、1点お伺いをしたいのですが表頭（タテ軸）に対して背景をつけるのにnth-childを増やしていますが設問が増えるたびにCSSの記述も増やしていかないとダメなものでしょうか？もっともJavaScriptなどを用いれば話が早いことではあるのですが CSSで出来る限り実装と表現を行って欲しいとの制約もありまして… 参考までにお伺いできればと思っております。五月雨のコメントで申し訳ありませんが、お手すきの際にでも返信をいただけましたら幸いです。よろしくお願いいたします。

Lhankor_Mhy

2024/09/27 07:11

ご理解の通りです。ただ、多い分には問題が起きないはずなので、たとえば一度99ぐらいまでコピペで作っておけば列数が100以上になるまでは問題なく機能するはずです。 scss でオンラインコンパイルすればすぐ書けますし。 https://sass-lang.com/playground/#eJxlzLEOwiAUBdCdr7iJHWDAhLG4+CstUB6R9iVPrDGEf9fd9QzHufvGgqlgE97h0Ej4lQnzjK4A/6YkSbeV48fT8tTXbbch1eqJzyT+aGQDlRr1pU9lGGOAFv8YHesSHvl3H9EGriwemWu8YaihvnwiLBM= WEBアプリとのことですので、そこまで増えることはなさそうかなと思っていたのですが、いかがでしょうか。

netuser

2024/09/27 08:21

Lhankor_Mhyさま改めてご回答をいただきありがとうございます。あらかじめ多くを記述しておいてそれで対応・・・という認識があっていたので問題ございません。オンラインで生成いただいたソースを参考に忍ばせておくことにしました。本当にここまでご対応をいただきまして本当にありがとうございました！沼も解決をして実装に向けて動き出すことができました。本当に本当にありがとうございました！フォローさせていただければと思っているのですが、よろしいでしょうか？

Lhankor_Mhy

2024/09/27 08:39

お役に立てたようで何よりです。フォロー、光栄です。今後ともよろしくお願いいたします。

netuser

2024/09/27 08:48

ありがとうございます！多々ご迷惑をお掛けしてしまうかもしれませんがこちらこそよろしくお願いいたします。

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