10月 132011
灰色背景がサンプルソース薄緑背景が実際の見た目
サンプルソース
HTMLソース
<table class=”stbl”>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td></td>
</tr>
</table>
<tr>
<td>セル1</td>
<td>セル2</td>
</tr>
<tr>
<td>セル3</td>
<td></td>
</tr>
</table>
CSSソース
.stbl {empty-cells:show;}
.stbl th, .stbl td {
border:1px solid #000;
}
.stbl th, .stbl td {
border:1px solid #000;
}
サンプル表示
| セル1 | セル2 |
| セル3 |
解説
何もしない状態では、<td>と</td>の間に何も書いてない場合、その部分の枠線が表示されません。
でも、何も書かれていないセルも見た目上枠線を表示したいという時にお試し下さい。
HTMLソース
空セルも枠線を表示したいテーブルにのみ適用させる為、テーブルにclassを指定します。
ここでは、<table class=”stbl”>としています。
CSSソース
empty-cells:show;
これは、空セルも表示するという意味です。そのまんまですね。
なので、枠線をくっつけたいテーブルにサンプルをコピー＆ペーストするだけでOKです。
但し、古いブラウザでは対応していないものもあります。
この指定はCSS2という規格で規定された内容なので、IE6以前はそれに対応していなかった為です。
ということで、IE6以前のブラウザでも空セルの枠線を表示したい場合は<td>と</td>の間に全角の空白を書くしかありません。
半角の空白では無効なのでご注意を。