css nth-child

rowspanで結合した行頭を基準に１行として、テーブルの行を交互に色付けしたいです。

###発生している問題・エラーメッセージ
単純にnth-childを使用すると、結合前の状態で交互に色付けされてしまい、思うように色づけができません。
A行、C行・・・と言った具合に結合されている部分を基準として行とみなし、交互に色を付けたいのですが、うまい具合にできません。（画像は失敗例です。）

###ソースコード
以下のようなテーブルです。
![A行、C行・・・と言った具合に結合されている部分を基準として行とみなし、交互に色を付けたいのですが、うまい具合にできません。（画像は失敗例です。）]WIDTH:86
css
tr:nth-child(even){
background:red;
}
###補足情報(言語/FW/ツール等のバージョンなど)

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

回答4件

表の組み方によっては対応出来ませんが、画像の様なシンプルな表であればnth-childだけでも対応は可能です。

element:nth-child(in+x)
「x個目からiの倍数(n)毎の要素にスタイルを適用する」という指定の仕方です。

複雑な表であればKazumiHirataさんの回答にある様にtbodyを追加すると良いと思います。

lang
1<!DOCTYPE html>
2<html>
3<head>
4<style type="text/css">
5<!--
6table, td, th {
7	border: 1px solid #555;
8	border-collapse: collapse;
9}
10
11td, th {
12	padding: 3px;
13	width: 30px;
14	height: 25px;
15}
16
17tr:nth-child(4n+1), /* 1,5,9,13... */
18tr:nth-child(4n+2)  /* 2,6,10,14... */
19{
20	background-color: #fbb;
21}
22-->
23</style>
24</head>
25<body>
26
27<p>有効な例</p>
28<table>
29	<tbody>
30		<tr>
31			<td rowspan="2">A</td>
32			<td>B</td>
33			<td>C</td>
34			<td rowspan="2">D</td>
35			<td>E</td>
36			<td>F</td>
37		</tr>
38		<tr>
39			<td>B'</td>
40			<td>C'</td>
41			<td>E'</td>
42			<td>F'</td>
43		</tr>
44		<tr>
45			<td rowspan="2">A</td>
46			<td>B</td>
47			<td>C</td>
48			<td rowspan="2">D</td>
49			<td>E</td>
50			<td>F</td>
51		</tr>
52		<tr>
53			<td>B'</td>
54			<td>C'</td>
55			<td>E'</td>
56			<td>F'</td>
57		</tr>
58		<tr>
59			<td rowspan="2">A</td>
60			<td>B</td>
61			<td>C</td>
62			<td rowspan="2">D</td>
63			<td>E</td>
64			<td>F</td>
65		</tr>
66		<tr>
67			<td>B'</td>
68			<td>C'</td>
69			<td>E'</td>
70			<td>F'</td>
71		</tr>
72		<tr>
73			<td rowspan="2">A</td>
74			<td>B</td>
75			<td>C</td>
76			<td rowspan="2">D</td>
77			<td>E</td>
78			<td>F</td>
79		</tr>
80		<tr>
81			<td>B'</td>
82			<td>C'</td>
83			<td>E'</td>
84			<td>F'</td>
85		</tr>
86	</tbody>
87</table>
88
89<p>無効な例</p>
90<table>
91	<tbody>
92		<tr>
93			<td rowspan="3"></td>
94			<td></td>
95			<td></td>
96			<td rowspan="2"></td>
97			<td></td>
98			<td></td>
99		</tr>
100		<tr>
101			<td></td>
102			<td></td>
103			<td></td>
104			<td></td>
105		</tr>
106		<tr>
107			<td></td>
108			<td></td>
109			<td></td>
110			<td></td>
111			<td></td>
112		</tr>
113		<tr>
114			<td rowspan="2"></td>
115			<td></td>
116			<td></td>
117			<td></td>
118			<td></td>
119			<td></td>
120		</tr>
121		<tr>
122			<td></td>
123			<td></td>
124			<td></td>
125			<td></td>
126			<td></td>
127		</tr>
128		<tr>
129			<td rowspan="3"></td>
130			<td></td>
131			<td></td>
132			<td rowspan="2"></td>
133			<td></td>
134			<td></td>
135		</tr>
136		<tr>
137			<td></td>
138			<td></td>
139			<td></td>
140			<td></td>
141		</tr>
142		<tr>
143			<td></td>
144			<td></td>
145			<td></td>
146			<td></td>
147			<td></td>
148		</tr>
149		<tr>
150			<td rowspan="2"></td>
151			<td></td>
152			<td></td>
153			<td></td>
154			<td></td>
155			<td></td>
156		</tr>
157		<tr>
158			<td></td>
159			<td></td>
160			<td></td>
161			<td></td>
162			<td></td>
163		</tr>
164	</tbody>
165</table>
166
167</body>
168</html>

投稿2015/06/09 19:40

flat

総合スコア617

google で "rowspan stripe table" を検索して次のページを見つけました。

Table with Rowspan Hover and Zebra effect http://stackoverflow.com/questions/15464831/table-with-rowspan-hover-and-zebra-effect

動作例が以下にあります。
http://codepen.io/cimmanon/pen/KqoCs

投稿2015/06/09 21:08

katoy

総合スコア22324

主旨と違うかも知れませんが、javascriptがありならできますね。

lang
1$(function(){
2   $("td[rowspan=2]").each(function(index){
3      if(index % 2 != 0){
4         $(this).parent().css("background-color","#ccc")
5                 .next().css("background-color","#ccc");
6      }
7   });
8});

lang
1<table>
2  <tr>
3    <td rowspan="2">A</td>
4    <td>B</td>
5    <td>C</td>
6  </tr>
7  <tr>
8    <td>B</td>
9    <td>C</td>
10  </tr>
11  <tr>
12    <td rowspan="2">B</td>
13    <td>B</td>
14    <td>C</td>
15  </tr>
16  <tr>
17    <td>B</td>
18    <td>C</td>
19  </tr>
20  <tr>
21    <td rowspan="2">C</td>
22    <td>B</td>
23    <td>C</td>
24  </tr>
25  <tr>
26    <td>B</td>
27    <td>C</td>
28  </tr>
29  <tr>
30    <td rowspan="2">D</td>
31    <td>B</td>
32    <td>C</td>
33  </tr>
34  <tr>
35    <td>B</td>
36    <td>C</td>
37  </tr>
38</table>

投稿2015/06/09 17:58

ina

総合スコア127

ベストアンサー

テーブルの構造にtbodyを追加し、cssで奇数列のtbodyタグの背景色を指定するようにしてはいかがでしょうか。
以下、htmlです。

lang
1<table border="1">
2  <tbody>
3    <tr>
4      <td rowspan="2">A</td>
5      <td>B</td>
6      <td>C</td>
7    </tr>
8    <tr>
9      <td>B</td>
10      <td>C</td>
11    </tr>
12  </tbody>
13  <tbody>
14    <tr>
15      <td rowspan="2">B</td>
16      <td>B</td>
17      <td>C</td>
18    </tr>
19    <tr>
20      <td>B</td>
21      <td>C</td>
22    </tr>
23  </tbody>
24  <tbody>
25    <tr>
26      <td rowspan="2">C</td>
27      <td>B</td>
28      <td>C</td>
29    </tr>
30    <tr>
31      <td>B</td>
32      <td>C</td>
33    </tr>
34  </tbody>
35  <tbody>
36    <tr>
37      <td rowspan="2">D</td>
38      <td>B</td>
39      <td>C</td>
40    </tr>
41    <tr>
42      <td>B</td>
43      <td>C</td>
44    </tr>
45  </tbody>
46</table>

以下、cssです。

lang
1tbody:nth-child(even)
2{ 
3  background : red; 
4}

投稿2015/06/09 16:33

KazumiHirata

総合スコア20

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

css nth-child

関連した質問