質問編集履歴

2

CSSも追加しました。

2018/02/24 15:52

投稿

HIROYUKI.I
HIROYUKI.I

スコア7

test CHANGED
File without changes
test CHANGED
@@ -152,7 +152,17 @@
152
152
 
153
153
  ```
154
154
 
155
+ ```CSS
155
156
 
157
+ tr.hover td,
158
+
159
+ td.hover {
160
+
161
+ background-color: lightyellow;
162
+
163
+ }
164
+
165
+ ```
156
166
 
157
167
  ### 試したこと
158
168
 

1

前提の追記と、HTMLの見本を追加しました。

2018/02/24 15:52

投稿

HIROYUKI.I
HIROYUKI.I

スコア7

test CHANGED
File without changes
test CHANGED
@@ -11,6 +11,18 @@
11
11
  よい対処方法がありましたらよろしくお願いいたします。
12
12
 
13
13
 
14
+
15
+ 【追記】
16
+
17
+ テーブルは1行目の<tr>内は全て<th>
18
+
19
+ 2行目以降は<tr>内の最初だけ<th>で、残りは全て<td>にしているため、
20
+
21
+ スクリプトのnth-child()内で-1や+2で調整しています。
22
+
23
+ 上記の条件であれば、セルが増えてもマウスオーバー時には十字方向にセルの背景色が変わるのですが、
24
+
25
+ ページ内に同じクラス名のテーブルが増えると、狂ってきます。
14
26
 
15
27
 
16
28
 
@@ -66,6 +78,82 @@
66
78
 
67
79
 
68
80
 
81
+ ```html
82
+
83
+ <table class="stripeTable">
84
+
85
+ <thead>
86
+
87
+ <tr>
88
+
89
+ <th></th>
90
+
91
+ <th>A</th>
92
+
93
+ <th>B</th>
94
+
95
+ <th>C</th>
96
+
97
+ </tr>
98
+
99
+ </thead>
100
+
101
+ <tbody>
102
+
103
+ <tr>
104
+
105
+ <th>1</th>
106
+
107
+ <td></td>
108
+
109
+ <td></td>
110
+
111
+ <td></td>
112
+
113
+ </tr>
114
+
115
+ <tr>
116
+
117
+ <th>2</th>
118
+
119
+ <td></td>
120
+
121
+ <td></td>
122
+
123
+ <td></td>
124
+
125
+ </tr>
126
+
127
+ <tr>
128
+
129
+ <th>3</th>
130
+
131
+ <td></td>
132
+
133
+ <td></td>
134
+
135
+ <td></td>
136
+
137
+ </tr>
138
+
139
+ <tr>
140
+
141
+ <th>4</th>
142
+
143
+ <td></td>
144
+
145
+ <td></td>
146
+
147
+ <td></td>
148
+
149
+ </tbody>
150
+
151
+ </table>
152
+
153
+ ```
154
+
155
+
156
+
69
157
  ### 試したこと
70
158
 
71
159