[PR]
2025年04月26日
×
[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。
テーブルの空白セルに枠線を表示する
2008年09月10日
HTMLにて。
テーブルに何も値が入ってない場合(<TD></TD>)枠線は表示されません。
これが意外に不便で、枠線を表示させるときは工夫しなければいけません。
以下、枠線を表示させる方法です。
【その1】
「改行(<br>)」もしくは「全角空白」、「空白コード」を挿入
<TD><BR></TD>
<TD> </TD>
<TD> </TD>
【その2】
CSSにて「空白セルの枠線表示」を設定
※IEでは適用されない
TABLE { empty-cells: show; }
【その3】
CSSにて空白セルにも枠線が表示されているように見せかける
TABLE{
border-collapse : collapse;
border : 1px solid #cccccc;}
TD{
border : 1px solid #cccccc;}
個人的には「その3」がオススメ。簡単だしどのブラウザでも使えます。
テーブルに何も値が入ってない場合(<TD></TD>)枠線は表示されません。
これが意外に不便で、枠線を表示させるときは工夫しなければいけません。
以下、枠線を表示させる方法です。
【その1】
「改行(<br>)」もしくは「全角空白」、「空白コード」を挿入
<TD><BR></TD>
<TD> </TD>
<TD> </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
Comment