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


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';
}

回答の条件
  • 1人2回まで
  • 登録:2008/08/10 22:23:49
  • 終了:2008/08/12 19:04:20

ベストアンサー

id:karaki No.3

karaki回答回数17ベストアンサー獲得回数62008/08/12 10:42:55

ポイント100pt

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

id:kt26

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

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

2008/08/12 19:03:53

その他の回答(2件)

id:susie-t No.1

susie-t回答回数99ベストアンサー獲得回数182008/08/10 23:25:57

ポイント5pt

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

いちおう、以下のように要素の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>

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

id:pntswrks No.2

pntswrks回答回数12ベストアンサー獲得回数12008/08/11 00:03:39

ポイント5pt

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

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

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

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

参考になれば幸いです。

id:karaki No.3

karaki回答回数17ベストアンサー獲得回数62008/08/12 10:42:55ここでベストアンサー

ポイント100pt

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

id:kt26

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

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

2008/08/12 19:03:53

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません