忍者ブログ

[PR]

2024年05月06日
×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

テーブルの空白セルに枠線を表示する

2008年09月10日
HTMLにて。

テーブルに何も値が入ってない場合(<TD></TD>)枠線は表示されません。
これが意外に不便で、枠線を表示させるときは工夫しなければいけません。

以下、枠線を表示させる方法です。

【その1】
「改行(<br>)」もしくは「全角空白」、「空白コード」を挿入

<TD><BR></TD>
<TD> </TD>
<TD>&nbsp;</TD>

【その2】
CSSにて「空白セルの枠線表示」を設定
 ※IEでは適用されない

TABLE { empty-cells: show; }

【その3】
CSSにて空白セルにも枠線が表示されているように見せかける

TABLE{
 border-collapse : collapse;
 border : 1px solid #cccccc;}
TD{
 border : 1px solid #cccccc;}


個人的には「その3」がオススメ。簡単だしどのブラウザでも使えます。
PR
 | HOME |