Web 制作のことを中心に、ちょっとした Tips などを掲載しています。「自分用メモ」が基本スタンス。

btmup Blog

(X)HTML CSS

col/colgroup 要素で有効なスタイルと無効なスタイル。

投稿日:

「ある列だけを改行なしにしたい」というときが結構あります。
確実なのは「その列のすべての td タグに class を付けていく」という方法ですが、あまりスマートとは言えません。
ソースの見栄え的にもいただけない感じ。

そこで、col や colgroup が使えるんじゃないかと思い、事あるごとに試していました。
が、どうしてもうまくいきません。
col と colgroup の組み合わせ方を変えてみたり、CSS の設定を工夫してみたり、いろいろ試しましたが結果は同じ。
ただ、設定したスタイルの中でも適用されるものと適用されないものがあり、その違いがよく分からないままだったので、どうもしっくりこない状態なのでした。

んで今回も似たような場面に遭遇したので改めて調べ直してみたら、分かりやすい解説が載っている記事を見つけましたのでご紹介します。
»第25回 tableをもっと見やすくデザインする:ITpro(リンク先は2ページ目)

この記事から抜粋すると、

colと後述するcolgroupはフォント系の装飾を受け付けません。

col/colgroupは表(table)に対して作用するタグですが,表に含まれるデータも含めて縦列という概念ではなく,データが入っていない表そのものに対して,部分的に縦列を定義するタグです。空っぽの表がベースというわけです。tdやthの中に入っているデータやテキストはcolの支配下にはないわけです。

要は、テーブルの構造には適用されるけど、中身については適用されない、ということのようです。
あぁなるほど。何て分かりやすい……。

ちなみに、ブラウザごとに挙動が違う件については、

左右寄せやpadding,font-weightなどフォント系についてはIEでは有効になっていますが,CSSないしXHTMLのリファレンスを見ると,本来は無効になっていなくてはならないようです。したがって,指定が有効になってしまうIEに問題があると言えるかもしれません。

とのこと。

じゃあセルの中身のスタイルはどうすれば良いかといえば、

それは,手間はかかりますが,tdとthに対してひとつずつCSS指定することで解決できます。

だそうです。
やっぱり一つ一つ地道に class を付けていくしかないみたいですね。

うーん……。
やっぱりしっくりこないなぁ。

雑感

HTML 5 とか CSS 3 ってこのあたりはクリアしてるんでしょうか。
列をグループ化できる方法が何かしら採用されているのなら、それだけでも普及を後押しする要因になりそうな気がします。




-(X)HTML, CSS
-, , , ,

Copyright© btmup Blog , 2024 All Rights Reserved Powered by AFFINGER5.