空の「td」タグに罫線を

JavaScript CSS

大昔からhtmlのtdタグは空白の場合に何故か罫線を引いてくれません。
非常にうざいですのですが、つい最近になって「cool」な解決方法を見つけました。

まずは、従来の方法も含めて回避方法を書いていきましょう。

その１． とか全角スペースを空白の場合にCGI側で埋め込んでいく

論外！
今思うと、ありえないアプローチでした。

その２．cellspacing="1"にしてtableの背景を罫線にする

こんな感じ。

<table cellspacing="1" bgcolor="#000000">
  <tr bgcolor="#ffffff">
    <td width="50" height="50"></td>
    <td width="50" height="50">2</td>
  </tr>
  <tr bgcolor="#ffffff">
    <td width="50" height="50">3</td>
    <td width="50" height="50"></td>
  </tr>
</table>

悪くはないのですが、最近は文書構造はhtmlで、デザインはスタイルシートでという
風潮があるため、cellspacing属性の値で罫線の幅を決めるのはあんまよくありません。
cellspacingに該当する属性も無いし、
近いもので、「border-collapse」、「border-spacing」はあるのですが、
空白セルに対する罫線描画とか関連してません。

スタイルシートでデザイン分離とかしてないＡＰならいいんでしょうが、
分離している場合はデザイン要素が混在するので避けた方が良い方法です。

その３．empty-cellsで「show」を指定する

CSS2から導入されたスタイルで、本来であれば一番スマートで美しい解決策なのですが、
IE 6.0では未サポートという致命的な欠点があるんですね。
どんなに個人的に嫌おうが、世の中一般的には一番使われているブラウザです。
このブラウザで駄目なものは残念ながら、
どんなにスマートでエレガントでも駄目なのです。orz

It's Cool(?) JavaScriptで一気に&nbsp;を埋めてしまう

スタイルシートでデザイン分離を行ってるようなケースであれば、
多分、ページの内容も（Javaの場合はstruts-tiles等で）テンプレート化
してるケースも多いでしょう。

そういうプロジェクトならば、footerあたりに以下のおまじないJavaScriptを埋め込んでおきましょう。

  var tds = document.getElementsByTagName('td');
  for(i = 0 ; i < tds.length ; i++) {
    var td = tds[i];
    var text = td.innerHTML;
    text = text.replace(/^\s+|\s+$/g, "");
    if(text.length == 0) {
      td.innerHTML = '&nbsp;';
    }
  }

あ〜ら不思議（でもないけど）、勝手に空白セルに&nbsp;が埋め込まれて、
幸せ〜な気分に浸れます。
一応、IEとFireFoxで動作することを確認してるので、
世の中大半のブラウザではいけるでしょう。

JavaScriptが無効になってるブラウザ？
えぇ、もちろん無効ですが何か？

本当は、ベースドキュメントをXHTMLで作ってりゃ、XPath使ってサーバサイドで同様な
処理は書けるし、そうすりゃJavaScriptも使わないので、ベースドキュメントをXHTMLに
できるならそれが一番coolな解決策だったりします。