テーブルの中身がないセルについて

質問

テーブルで、空欄を作りたい場合は、
<td></td>
という記述になりますが、表示結果がきれいになるようにするにはどのような方法があるのでしょうか？

<td></td>
このままだと、大抵のWWWブラウザではempty-cellsの規定値hideが適用されてしまいそのセルに枠線が表示されず不恰好になってしまいます。

<td><br></td> , <td> </td>
などではその分の領域が発生してしまいます。
→そのセルを選択（ドラッグ）した場合に少なくともIEでは領域が選択されます。

empty-cellsなどのプロパティがIEはサポートされていないようで…。
されていればそれでいいのですが。

ということで、
<td><span style="visibility:hidden"><br></span></td>
のような方法を考えたりしたのですが、もっとスマートな方法はありませんでしょうか？

このようなことを考察されているサイト等をご存知でしたら教えていただきたいと思います。

回答No.3

steel_gray · ベストアンサー

IEでも実装されているので
border-collapse:collapse;
を指定するのはどうでしょうか？
（多少質問の意図からは外れてしまいますが）

参考URL：

http://www.htmq.com/style/border-collapse.shtml

お礼

※補足もお礼も雑じってる…。
border-collapse:collapseを適用させた状態で立体感のあるテーブルを作ろうと試行錯誤してみたのですが、セル同士がくっついているので無理でした…。

立体感のないテーブルでなら、このプロパティを利用した方が簡単ですね。

<table>のborder属性を使わずに同様の枠線を作ろうとしたらIEではborder-style:insetがsolidと変わりないような…。
Standardでも空のセルの扱いがIEは変わりない…。

回答ありがとうございました。

回答No.2

namiri_e

<table border="1">
<tr>
<td style="font-size:1px">　</td>
</tr>
</table>

こんな感じに空白文字を極限まで小さくすると多少はましではないですか？
どうでしょう？

補足

フォントサイズですかｗそこには気付きませんでした。
font-size:0でちょっと試してみました。
NNやFFではvisibility:hiddenと同様の効果が得られました。テキストに限ってですが。
IEでは極小表示となりました。1pxのような感じで…。

本件に関してはvisibility:hiddenの方が適しているような気がします…。
セルを選択してのコピーペーストも試してみましたが、結果はfont-size:0もvisibility:hiddenも同じようです。

回答ありがとうございました。
※補足の方でお礼申し上げます。

回答No.1

noname#21343

非改行スペース

&nbsp;

をはさむ、という手も・

<table border="1">
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>

ピント外れだったらご勘弁。

補足

回答ありがとうございます。
しかしそれでは表意文字をセルに入力しているので、empty-cells以前の問題になってしまいます。

態と半角スペース分の空白領域を表示したい場合にはその記述となりますね。