読者です 読者をやめる 読者になる 読者になる

bass-inu's blog

非IT企業Web担当者の孤独な雑記

縦の列を消したかった

ただの愚痴なんだけど聞いてくれないか?

まずこういう表を作るとするじゃろ?
f:id:bass-inu:20161104142540p:plain

私は思った。「い」と「う」の列を消したい、と。

ああああええええおおおおお!!!とすれば口をダラーっと開けたままでも発声ができる。

だから、こういうふうにグループ分けをした。

<colgroup span="1" class="one"></colgroup> <!-- あ -->
<colgroup span="2" class="two"></colgroup> <!-- いう -->
<colgroup span="3" class="san"></colgroup> <!-- えお! -->

うんうん。こんな感じね。
f:id:bass-inu:20161104143059g:plain
各グループに色を付けよう。

.one {background:#008877}
.two {background:#ffcc00}
.san {background:#cc0000}

f:id:bass-inu:20161102214527j:plain
…あれ?どっかで見たことある配色だなって思ったら。

traffic lights

信号


自転車専用の信号があるんだ…

いや、そんなことはどうでもいい。「い」「う」を消そう。さっきグループ分けしたクラスをまるっと…

.two {display:none}

f:id:bass-inu:20161104153904g:plain


!?

はああぁぁあ!?ちげえぇえぇし、そうじゃねぇぇええ!


どうやら、グループ(colgroup)を削除(display:none)すると、
グループという括りのみが消えて、その中身(「い」と「う」)は消えないらしい。

なんというガッカリ仕様。所詮colgroupは概念でしかなかった。概念て。
エクセルやったら列選択してパッと削除できんのに!


仕方がないので、別のアプローチ。
擬似クラス nth-child() …っというCSSを使う…!

td:nth-child(n+2):nth-child(-n+3) {display:none}

これ、ややこしい。
「左から2番目以降」から「左から3番目まで」の列のセルを削除。
要するに、「い」と「う」のセルを一つ一つ丁寧に(?)消すよ、ということだ。

f:id:bass-inu:20161102215224j:plain

ほらね!便利!


だがしかし、ひとつ罠が…
セルを結合したとき…
f:id:bass-inu:20161104154321j:plain

いいいいい!!!!!
誰が出てきていいと言った!

という感じになってしまう。
HTMLを見るとわかるけども「い」が1番目になっちゃうからね。


もうどうしようもない。数時間を無駄にして私は諦めた。



※次の日、サーバーサイドで解決した。始めからそうすれば…何やってんだろ…orz