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>
と書くと、
A | B | C |
---|---|---|
あー | いー | |
うー | えー | おー |
の真ん中(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; } を適用すると、
セルの間がきゅきゅっと締まる重なる。
これで、大丈夫。
A | B | C | D |
---|---|---|---|
あー | いー | ||
ぽー | |||
うー | えー | おー | かー |
空白tdが続いても大丈夫。
http://www.tohoho-web.com/css/reference.htm#border-collapse
CSS2 の仕様書上の規定値は collapse ですが、大半のブラウザでは separate が規定値のようです。
{ border-collapse: separate; }
だと、空白tdがへんてこになってしまうみたい
勉強になったな。
ありがとう「はてな」さん(CSSを覗き見させていただきました)。