Firefoxを使ってるのですがズームするとTableの線（ボーダー）が消えてしまいます！

質問

他のページにも投稿したのですが、どうも質問した場所が違ってたよう
なので、もう一度ここで質問し直させてください。お願いします。
Firefoxを使ってるのですがズームするとTableの線（ボーダー）が消えてしまいます！
同じTableを3パターンのズーム度でアップしました。
http://i800.photobucket.com/albums/yy282/nothingspecialda/tanuki.jpg​
左は問題無いのですが、真ん中と右はTableの線が一部消えてしまってます。
ちなみにここの質問一覧ページもズームすると枠線が消えたりします。
http://oshiete1.goo.ne.jp/205/c709.html
ちなみにIE8でも似たような現象がありました！
何が原因でしょうか？どうすれば改善するでしょうか？
アドバイスお願いします。
サンプルTableのHTMLとCSSを書いておきます。

☆HTML
<table>
<tr>
<td>たこ焼き</td>
</tr>
<tr>
<td>たこ焼き</td>
</tr>
<tr>
<td>たぬき</td>
</tr>
<tr>
<td>たぬき</td>
</tr>
<tr>
<td>ほうれん草・ピーマン</td>
</tr>
<tr>
<td>ほうれん草・ピーマン</td>
</tr>
</table>

・CSS
tr, td {border:1px solid black;}
table{text-align:center; border-collapse:collapse;}

回答No.2

abril

フルページズームの際のブラウザ固有の不具合の様です。
tableのborderがズームイン／アウトの際に部分的に非表示になってしまう点に関しては、特にFirefox3とIE7が弱いみたいですね。Opera9.61では非表示にこそならないですが、時々太さが不揃いになる現象が見られました。確認した中ではSafari4が一番優秀の様で、非表示になる事も線の太さが不揃いになる事も起こりませんでした

検証してみましたところ、Firefox3では"border-collapse: separate;"にする事で非表示や太さの不揃いという不具合は回避できる様です。
ソースの様な”1行に1列”の表組みであれば、CSSを：

table {
border-collapse: separate;
border-spacing: 0;
border-bottom: 1px solid #000;
}
td {
border: 1px solid #000;
border-bottom: none;
text-align: center;
}

とする事で"border-collapse: collapse;"と同じ見え方にでき、且つズームイン／アウトの際のボーダー表示の不具合も回避できます。
※table {（省略）border-top: 1px solid #000;}とtd {（省略）border-top: none;}の組み合わせでも結果は同じ事になりますので、任意でどうぞ。

”1行に2列以上”の場合は、上下だけでなく隣合うセルの左右のボーダーも重複してしまうので、CSSは：

table {
border-collapse: separate;
border-spacing: 0;
border-bottom: 1px solid #000;
border-left: 1px solid #000;
}
td {
border: 1px solid #000;
border-bottom: none;
border-left: none;
text-align: center;
}

とでもしておけば良いです。
※これも上記と同じ理屈で、table {（省略）border-right: 1px solid #000;}とtd {（省略）border-right: none;}の組み合わせでもかまいません。

ただし、IE7以下はborder-spacingが効かない為、"border-collapse: separate;"とする事でセルとセルの間に隙間ができてセルが切り離されて見えてしまい、"border-collapse: collapse;"の場合と同じ結果にはなりません。
IE7以下対策としてはNo.1様の様にコンディショナル・コメントを使う手もあるのですが、HTML側の<table>の記述に「cellspacing="0"」の属性を追加しておく事でも回避できます。

回答No.1

xs200

table {
text-align:center;
border-left: 1px solid black;
border-right: 1px solid black;
border-top: 0;
border-bottom: 0;
border-spacing: 0px;
border-collapse: separate;
}

<!--[if IE]>
<style type="text/css">
table { text-align: center; border-collapse: collapse; }
</style>
<![endif]-->