人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ボタンを押すと、テーブルの非表示の行が表示されるような物を作っています。

IE6だと問題ないのですが、FirefoxやOperaでは画像のように表示が崩れてしまいます。
テーブルを崩れなくするにはどうすればいいのでしょうか?

ソースは以下のようにしています。

■CSS
table{border: 1px solid #CCCCCC;width: 300px;}
th{background-color: #eeeeee;border: 1px solid #CCCCCC;width: 100px;}
td{border: 1px solid #CCCCCC;}
#line{display: none;}

非表示にしたい行のtrに<tr id="line"> と設定しています。

■Javascript
function lineDisplay(){
document.getElementById("line").style.display = 'block';
}

1218374626
●拡大する

●質問者: kt26
●カテゴリ:ウェブ制作
✍キーワード:background-color border CSS firefox IE6
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

1 ● susie-t
●5ポイント

ほんとだ、崩れますね。。。

いちおう、以下のように要素のclassName属性を操作するようにしたらできました。(Firefox2、Opera9で確認)

<html>
<head>
<style>
table{border: 1px solid #CCCCCC;width: 300px;}
th{background-color: #eeeeee;border: 1px solid #CCCCCC;width: 100px;}
td{border: 1px solid #CCCCCC;}
.line{display: none;}
</style>
<script>
<!--
function lineDisplay(){
document.getElementById("line").className = '';
}
//-->
</script>
</head>
<body>
<button onclick="lineDisplay();">表示</button>
<table><tr>
<th>a</th>
<td>a</td>
</tr>
<tr id="line" class="line">
<th>a</th>
<td>a</td>
</tr>
</table>
</body>
</html>

現象自体の原因は分からないです^^;


2 ● pntswrks
●5ポイント

まずはhtmlのソースを見てみないとなんとも言えないと思います。

ただ、僕だったらtrをどうこうせず、tr#hogeの中のth,tdをdisplayでnone/blockします。

trに対するスタイルの指定はブラウザごとに動作が違うので要注意です。

僕も以前、trにbackgroundの指定をし、firefoxとieの挙動の違いに悩まされましたので。

参考になれば幸いです。


3 ● karaki
●100ポイント ベストアンサー

Firefoxなどでは、display要素をblockではなくtable-rowを指定すると上手くいくと思います。

function lineDisplay() {

try {

document.getElementById("line").style.display="table-row";

} catch (e) {

document.getElementById("line").style.display="block";

}

}

http://www.marguerite.jp/Nihongo/WWW/RefCSS/display.html

◎質問者からの返答

こちらの方法が一番簡単で実用的だと感じました。

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

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ