OWIEです。今回は標準タグであるtbodyのお話。
近年はスマートデバイスの割合が多くなっているため、なるべくシンプルな表組みにすることが推奨されますが、案件によっては複雑な表組みが避けられない場合があります。
複雑なtableでも交互に背景色を付けたい！
excelライクな表組みでは行数を見やすくするために交互に色を付けたいという場合もあるかと思います。
シンプルな表組みであれば、
tr:nth-child(even){
background-color: gray;
}
といった風にtrの偶数行（あるいは奇数行）の背景色に色を付けろ…という命令で事足りるのですが、例題のようなrowspanで行を結合した複雑なtableの場合はどうなるかと言うと…
あらら…想定外の状態になってしまいました。そもそも行同士を結合しているので、画面上は一列に見えてもソース上ではきっちりtrで分けられています。なので一部分のみに色が引かれてしまいました。
分割されてしまっているtr２セット分を１セットとしてグループ化してしまえば問題は解決なのですが、ブロック要素のdivを使うわけにもいかないし、インライン要素のspanもおかしいし…なにか自然な方法で実現できないかな？
実はtbodyは複数回使える
初心に還ってMDN web docsのtableタグの項をウロウロしていたところ…
- HTML の表本体要素 (<tbody>) は、表の一連の行 (<tr> 要素) を内包し、その部分が表 (<table>) の本体部分を構成することを表します。
- 連続していれば、1 つの表の中に複数の <tbody> を使用することができます。これにより必要に応じて、巨大な表の行を複数のセクションに分割し、個別に整形することができます。
これだ〜！tbodyは表組みの本体部分ではあるけど、複数回使ってはいけないという明記は一つもされていないどころか、「巨大な表の行を複数のセクションに分割し、個別に整形することができます」とまで定義されてあるなら使わない手はないですね。
tbodyに背景色を設定し、想定した挙動になりました。
やればやるほど知らないことが出てくるhtmlタグ。
なるべく標準タグを使って悩みを解決していきたいですね。
