IE以外でdisplay:noneで隠したテーブルの行が詰められない

質問

実は昨日投稿していったん解決して頂いた者です。ご回答下さった方ありがとうございます!!

改めて現状のご説明です。長くなりますがご容赦下さい。
1ページ上に、選択肢6つのプルダウンメニューと縦に長いテーブル（<tr>が数十行）があります。
プルダウンメニューで選択すると、テーブルの行表示が自動的に一部の行だけに絞り込まれる仕様になっています。

【スクリプト】
<script language=javascript>
<!--
function view(obj){
var v=obj.value;
var trs=document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++){
var patern="^"+v+"[0-9]{3}$";
if(trs[i].id.match(patern) || v=="") trs[i].style.display='block';
else trs[i].style.display='none';
trs[0].style.display = "block";
}
}
//-->
</script>

【プルダウンメニュー】
<form>
<select onChange="view(this)">
<option selected="selected">選択</option>
<option value="a">ジャンルA</option>
<option value="b">ジャンルB</option>
<option value="c">ジャンルC</option>
<option value="d">ジャンルD</option>
<option value="e">ジャンルE</option>
<option value="">すべて表示</option>
</select>
</form>

【テーブル】
ページ上のテーブル要素はここだけです。
1行目（ヘッダ行）より下のデータ行には、<tr id="プルダウンメニューに対応したアルファベット＋数字3桁">でIDを付けています。

<table border="1">
<tr><th>項目1</th><th>項目2</th></tr>
<tr id="a030">
<td>あああああああああああ</td>
<td>あああああああああああ</td>
</tr>
<tr id="b029">
<td>いいいいいい</td>
<td>いいいいいい</td>
</tr>
<tr id="c028">
<td>う</td>
<td>う</td>
</tr>
<tr id="d027">
<td>えええええええええええええええええええええ</td>
td>えええええええええええええええええええええ</td>
</tr>
<tr id="e026">
<td>おおおおおおおおおおおおおおお</td>
<td>おおおおおおおおおおおおおおお</td>
</tr>
<tr id="a025">
<td>あああああああああああ</td>
<td>あああああああああああ</td>
</tr>
<tr id="b024">
<td>いいいいいい</td>
<td>いいいいいい</td>
</tr>
<tr id="c023">
<td>う</td>
<td>う</td>
</tr>
<tr id="d022">
td>えええええええええええええええええええええ</td>
td>えええええええええええええええええええええ</td>
</tr>
<tr id="e021">
<td>おおおおおおおおおおおおおおお</td>
<td>おおおおおおおおおおおおおおお</td>
</tr>
・
・下に続く
・
</table>

このページをFireFox1.5、Nescape7で確認すると以下2点の不具合が発生してしまうのです。
(1)ヘッダ行の幅が下のデータ行に揃わない（短くなる）。
(2)もっと行数が増えると、プルダウンメニュー選択でdisplay:noneで非表示にした行が余白としてぽっかり空いてしまう。
IEではヘッダ行がデータ行に揃い、非表示の行はきちんと上に詰められてまともな表になるのです。

Mozilla系専用のスクリプトを書き足す必要があるのかと思うのですが、全く知識不足で見当がつきません…
申し訳ございませんがご教示のほどお願い致します。

回答No.1

steel_gray · ベストアンサー

次のように変更してみてください。（２箇所あります）
display='block';
↓
display='';

本来、TR要素のdisplayの規定値は'table-row'なのでFirefoxなどのちゃんとしたブラウザでは'block'を設定するおかしくなります。
'table-row'を設定するようにすればFirefoxなんかではちゃんと動くんですが、今度は標準に準拠していないIEで動かなくなってしまうので…
空('')を設定するとどちらでもうまくいくようです。

お礼

うまくいきました!!
昨日から何度もご丁寧に、本当にありがとうございます(T-T)

昨日は結局、ご教示下さった方法を自分で使いこなせず、ポイントを差し上げられなかったのが本当に心残りでしたので、今回きちんとお礼ができて嬉しいです!
本当に本当にありがとうございました!!