テーブルの空セルも枠を表示する

灰色背景がサンプルソース

サンプルソース

HTMLソース

CSSソース

.btbl {empty-cells:show;}
.btbl th, .btbl td {
border:1px solid #000;
}

サンプル表示

→テーブルの空セルも枠を表示する(サンプル)

解説

何もしない状態では、<td>と</td>の間に何も書いてない場合、その部分の枠線が表示されません。でも、何も書かれていないセルも見た目上枠線を表示したいという時にお試し下さい。

HTMLソース

空セルも枠線を表示したいテーブルにのみ適用させる為、テーブルにclassを指定します。
ここでは、<table class="btbl">としています。

CSSソース

empty-cells:show;
これは、空セルも表示するという意味です。そのまんまですね＾＾
なので、枠線をくっつけたいテーブルにサンプルをコピー＆ペーストするだけでOKです。

但し、IE系列では対応していないです。(IE7はどうか不明)
この指定はCSS2という規格で規定された内容なので、IE6まではそれに対応していない為です。
対応を確認しているのは、FireFox1.5、Opera9、Netscape 7.1。つまり、Windowsで使えるものは、IE以外はほぼ対応していると考えてよいかと。もうすぐ公開されそうなIE7はどうなるかまだ不明ですが、対応していることを祈りつつ。

ということで、現時点でIEでも空セルの枠線を表示したい場合は<td>と</td>の間に全角の空白を書くしかありません。半角の空白では無効なのでご注意を。