css table 行　交互の色付けを飛ばしたい行の実現方法

htmlテーブルで、交互に色をつけたいのですが、交互につけた色から外したい行があります。
どのように実現したらよいでしょうか？

off と付けたクラスの行は飛ばして、交互に色を付けたい。
1,2,3,5行で交互に色を付けたい。

azuapricot

2019/01/08 06:40 編集

.off { 　代わりの背景色を記述 } のCSS書いても変わらなかったのでしょうか

m.ts10806

2019/01/08 06:45

コードはマークダウンのcode機能を利用して提示してください。

te_w

2019/01/08 07:25

質問頂きありがとうございました。 off クラスに背景色をつけるとそこだけ背景色が変わりますが、その行を抜かしての交互の行色付けにならないのです。

yoshinavi

2019/01/08 14:56

奇数行と偶数行とで分けるのでしょうか？それとも、1行目と3行目が同色、2行目と5行目が同色となるように分けるのでしょうか？

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

回答3件

:nth-child(odd) ではなく :nth-of-type(odd) を使う
普通のテーブル系要素（table tr td 等）を使うとなぜか制御できないので

テーブル系要素以外のタグを使用し、スタイルシートで無理やりテーブル化

飛ばしたい行は属性（class等）で制御できないので、別の要素で記述する
似非テーブルをテーブルっぽく見せる（★）のが割と面倒だった

HTML
1<div>
2  <section><p>01</p><p>01</p></section>
3  <section><p>02</p><p>02</p></section>
4  <section><p>03</p><p>03</p></section>
5  <span><p>IRREGULAR</p><p>IRREGULAR</p></span>
6  <section><p>04</p><p>04</p></section>
7  <section><p>05</p><p>05</p></section>
8  <section><p>06</p><p>06</p></section>
9</div>

CSS
1/* <table> 代替要素★ */
2div {
3  display: table;
4}
5
6/* <tr> 代替要素★ */
7/* <section> が交互塗り分け行用、<span> が飛ばしたい行用 */
8div section, div span {
9  display: table-row;
10}
11
12/* <td> 代替要素★ */
13/* セルっぽく見せるための border 指定 */
14div p {
15  display: table-cell;
16  border: 4px #fff ridge;
17}
18
19/* 交互塗り分け行の背景色 */
20div section:nth-of-type(odd) {
21  background: #ff0;
22}
23
24/* 飛ばしたい行の背景色 */
25div span {
26  background: #f00;
27}

サンプル（jsfiddle）

いちおうCSSだけで作ることはできたのですが、
yambejpさんが仰っしゃるように　作っててたしかに姑息さを感じました…

投稿2019/01/08 16:07

編集2019/01/08 16:09

Sohaya

総合スコア254

te_w

2019/01/12 10:17

回答頂きましてありがとうございました。サンプルを添付頂きましてありがとうございます。こういった方法・考え方もあるのですね。とても勉強になりました。

x_x

2019/01/21 07:47

span の子に p は取れないので成立しません。ほかの要素にしたほうがいいかと思います。

Sohaya

2019/01/21 08:15

> x_xさん > span の子に p は取れないコメントありがとうございます。こちらも勉強になります。 pとspanを逆にするか、spanの代わりにasideを使うか…

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

ベストアンサー

セレクタの:not()を併用することで可能になるかもしれません。

<style>
		.tbl tr:nth-child(odd):not(.off) td {  
		background-color: yellow;  
		}
		.tbl tr:nth-child(even):not(.off) td {  
		background-color: #555;
		} 
</style>

<table class="tbl">
<tr>
<td>1行目</td>
</tr>
<tr>
<td>2行目</td>
</tr>
<tr>
<td>3行目</td>
</tr>
<tr class="off"> 
<td>4行目</td>
</tr>
<tr>
<td>5行目</td>
</tr>
</table>

chromeでは以下のようなイメージになることが確認できました。