tableの空っぽのところ

<table>
  <thead>
  <tr>
    <th>A</th><th>B</th><th>C</th>
  </tr>
  </thead>
  <tr>
    <td>あー</td><td></td><td>いー</td>
  </tr>
  <tr>
    <td>うー</td><td>えー</td><td>おー</td>
  </tr>
</table>

と書くと、

ABC
あーいー
うーえーおー

の真ん中(tdが空っぽの所)に枠線が表示されなくてへんてこに・・・って、ん?


はてなダイアリーで書くとへんてこになってない。
もうちょい調べなきゃ。


Firefoxだと、table { empty-cells: show; } で変にならない(IEはダメ)。
http://www.tohoho-web.com/css/reference.htm#empty-cells


「br入れとけ」っていうアンチョコもあるみたい。
http://www.tohoho-web.com/html/table.htm の「■ 中身が空のセル」


-- 追記 --


table に { border-collapse: collapse; } を適用すると、
セルの間がきゅきゅっと締まる重なる。


これで、大丈夫。



ABCD
あーいー
ぽー
うーえーおーかー


空白tdが続いても大丈夫。

http://www.tohoho-web.com/css/reference.htm#border-collapse

CSS2 の仕様書上の規定値は collapse ですが、大半のブラウザでは separate が規定値のようです。


{ border-collapse: separate; }
だと、空白tdがへんてこになってしまうみたい


勉強になったな。


ありがとう「はてな」さん(CSSを覗き見させていただきました)。