ボタンを押すと、テーブルの非表示の行が表示されるような物を作っています。
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';
}
※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。
ログインして回答する
ベストアンサー
-
karaki
満足100pt
Firefoxなどでは、display要素をblockではなくtable-rowを指定すると上手くいくと思います。
function lineDisplay() {
try {
document.getElementById("line").style.display="table-row";
} catch (e) {
document.getElementById("line").style.display="block";
}
}
-
r-study
-
r-studyその他の回答
-
susie-t
満足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>
現象自体の原因は分からないです＾＾；
- その他の回答を読む
この質問へのコメント
質問の情報
- 登録日時
- 2008-08-10 22:23:49
- 終了日時
- 2008-08-12 19:04:20
- 回答条件
- 1人2回まで
この質問のカテゴリ
この質問に含まれるキーワード
人気の質問
-
36歳です。卵巣腫瘍疑いで大学病院に10月1日に受診しました。エコーで充実性腫瘍があるから至急MRIと腫瘍マ…
ikkuchaan
1
-
同じような体験をしたことがある人はいますか？。 ある日、お葬式の職業に就きたいなあなんて話題にしてい…
匿名質問者
1
-
私は、【チルスポ】 という名前で、 チルスポット情報を共有するアプリを開発しています。 皆さんの知って…匿名質問者1
-
b型就労支援施設に通っている方に質問です。どういうことが通っていて辛いと感じますか？他の利用者の方と…匿名質問者
-
今行きがかり上で中小企業を相手に民事訴訟の原告と被告で2件の裁判を抱えています。しかし何も深刻さはな…
asnaro_71
1