cssで指定できるborderは、1つのタグにつき1つです。 二重線にはできますが、その2つの線それぞれの色や太さや間隔を細かく設定できるわけではありません。 何が言いたいかというと、この枠のような線にする場合は、<td></td>だけでは無理ということ。
今は背景画像でそれっぽくしてある本家ですが、やっぱりちょっと違います。 なのでちょっと手間ですが、<td><div></div></td>とでもして線をきちんと表現してあげようかなと。
思ったのですが。
ここみたいなテーブルの使い方ならいいんですけど、複数列に渡るテーブルだとどうやら無理のようです。 列Aが1行、列Bが2行以上となる場合、列Aのdivがtdの高さ一杯になってくれません。 divとtdの両方にheight:100%;を指定すれば一応なんとかなるんですが、そうすると今度は中央にあった文字列が上揃えになってしまい(泣)。
それだけならまあ許せなくもないんですが、borderをwidth、heightに含めるかどうかの解釈がブラウザによって異なるため、それをクリアするにはcssハックを用いるか、divではなくtableで対応するしかなくなってきます。
というわけでひとまず諦めたんですが、何かいい方法はないものでしょうか。。。
|