縦の列を消したかった
ただの愚痴なんだけど聞いてくれないか?
まずこういう表を作るとするじゃろ?
私は思った。「い」と「う」の列を消したい、と。
ああああええええおおおおお!!!とすれば口をダラーっと開けたままでも発声ができる。
だから、こういうふうにグループ分けをした。
<colgroup span="1" class="one"></colgroup> <!-- あ --> <colgroup span="2" class="two"></colgroup> <!-- いう --> <colgroup span="3" class="san"></colgroup> <!-- えお! -->
うんうん。こんな感じね。
各グループに色を付けよう。
.one {background:#008877} .two {background:#ffcc00} .san {background:#cc0000}
…あれ?どっかで見たことある配色だなって思ったら。
信号
自転車専用の信号があるんだ…
いや、そんなことはどうでもいい。「い」「う」を消そう。さっきグループ分けしたクラスをまるっと…
.two {display:none}
!?
はああぁぁあ!?ちげえぇえぇし、そうじゃねぇぇええ!
どうやら、グループ(colgroup)を削除(display:none)すると、
グループという括りのみが消えて、その中身(「い」と「う」)は消えないらしい。
なんというガッカリ仕様。所詮colgroupは概念でしかなかった。概念て。
エクセルやったら列選択してパッと削除できんのに!
仕方がないので、別のアプローチ。
擬似クラス nth-child() …っというCSSを使う…!
td:nth-child(n+2):nth-child(-n+3) {display:none}
これ、ややこしい。
「左から2番目以降」から「左から3番目まで」の列のセルを削除。
要するに、「い」と「う」のセルを一つ一つ丁寧に(?)消すよ、ということだ。
ほらね!便利!
だがしかし、ひとつ罠が…
セルを結合したとき…
いいいいい!!!!!
誰が出てきていいと言った!
という感じになってしまう。
HTMLを見るとわかるけども「い」が1番目になっちゃうからね。
もうどうしようもない。数時間を無駄にして私は諦めた。
※次の日、サーバーサイドで解決した。始めからそうすれば…何やってんだろ…orz