ラジオボタン＋style.displayで<TR>の表示を切り替えるとテーブルが拡大していく

質問

ラジオボタンを使って、

if (keisan_select == "1") {
document.getElementById('TAG_check_set1').style.display = "inline";
document.getElementById('TAG_check_set2').style.display = "none";

という風に<TR>のstyleを変更して
テーブルの表示切り替えを行っているんですが
Firefoxで実際に動作させてみると、表示を切り替えるたび
セルが拡大するような形で下にずれていきます。(IE7だと問題なし)

Firefoxのエラーコンソールでは特に警告無く、
Another HTML-lint gatewayの文法チェックでは75点で普通の評価。(エラーの重要度最大2点)
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

タグに関係ないところで少し書き換えると動作が変わったりするので
うちの環境に問題があるのかも知れないけど・・何が原因かわかる人います？。

アップローダに上げたサンプル
http://kissho.xii.jp/1/src/1jyou73993.html

<TABLE style="border:1px solid">
<TR><TD>
テキストエリアが↓にずれていく謎のボタン
　<label for="TAG_in_check1"><input type="radio" name="keisan_select" id="TAG_in_check1" onclick="set_display()" value="1" checked>猫</label>
　<label for="TAG_in_check2"><input type="radio" name="keisan_select" id="TAG_in_check2" onclick="set_display()" value="2">犬</label>
　<label for="TAG_in_check3"><input type="radio" name="keisan_select" id="TAG_in_check3" onclick="set_display()" value="3">狸</label>
</TD></TR>

<TR id="TAG_check_set1"><TD>表示変更領域　にゃんこ</TD></TR>
<TR id="TAG_check_set2" style="display:none"><TD>表示変更領域　わんこ</TD></TR>
<TR id="TAG_check_set3" style="display:none"><TD>表示変更領域　ぽんぽこ</TD></TR>
</TABLE>

回答No.1

SAYKA · ベストアンサー

標準状態に戻す時は　nullString　でやってみて

例えばこう
document.getElementById('TAG_check_set2').style.display = "";

標準がinlineならinlineへ戻す時に ""　(noneの時は"none")
標準(css上での記述)がnoneならnoneへ戻す時に ""　(inlineの時は"inline")

お礼

できました！！＼(＾o＾)／
昨日からずっと試行錯誤しつつ気づかなかった、、

ありがとうございました！。m(＿)m