みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

style=displayでの表示/非表示切り替え

テーブルで表示させている内容をJavaScriptを使って行ごとに表示/非表示の切り替えができるようにしたのですが、表示させた時、IEでは通常のテーブル表示のように表示されるのですが、FirefoxやSafariでは何故かテーブルの一番左の<tr>要素内に全ての<td>要素が入る形で表示されてしまいます。多分CSSの書き方に関係していると思われるのですが、どなたか分かる方アドバイスをお願い致します。

下記は、コードの抜粋です。

[CSS]

(略)

#content {
padding: 10px 0;
width: 780px;
float: left;
}
#inquiry {
width: 600px; /* ボックスの幅を指定 */
margin-left: auto;
margin-right: auto;
}
#inquiry table {
border-top: 1px solid #CCCCCC;
border-bottom: none;
border-left: none;
border-right: 1px solid #CCCCCC;
font-size: 100%;
width: 100%;
}
#inquiry td {
border-top: none;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: none;
padding: 10px;
text-align: center;
}
#inquiry th {
border-top: none;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: none;
background-color: #F3F3F3;
font-weight: normal;
padding: 10px;

}

(略)

[HTML]

(略)

<script type="text/javascript" src="../../webroot/js/prototype.js"></script>
<script type="text/javascript">
<!--
function OnScreenHelp(id){
var elem = document.getElementsByClassName(id);
for(var i=0;i<elem.length;i++) {
elem[i].style.display = elem[i].style.display == "none" ? "block" : "none";
}
}
//-->
</script>

(略)

<table border="border" summary="購入履歴" cellspacing="0">
<caption><h3>購入履歴</h3></caption>
<tr>
<th scope="col"><label for="name">注文番号</label></th>
<th scope="col"><label for="name">ご注文日</label></th>
<th scope="col"><label for="name">合計金額</label></th>
<th scope="col"><label for="name">備考</label></th>
</tr>
<?php
foreach($data1 as $row1) {
$id = $row1['Order']['id']; ?>
<tr onclick="OnScreenHelp(<?php echo $id; ?>)">
<td><?php echo h($row1['Order']['id']); ?></td>
<td><?php echo h($row1['Order']['orderdate']); ?></td>
<td><?php echo h($row1['Order']['total']); ?></td>
<td><input type="text" name="name" size="30" id="name" class="text1" value="送料込み" /></td>
</tr>
<?php } ?>
</table><br />

<table border="border" summary="明細情報" cellspacing="0">
<caption><h3>明細</h3></caption>
<tr>
<th scope="col"><label for="customerno">商品番号</label></th>
<th scope="col"><label for="name">商品名</label></th>
<th scope="col"><label for="price">価格</label></th>
<th scope="col"><label for="quantity">数量</label></th>
<th scope="col"><label for="subtotal">小計</label></th>
</tr>
<?php foreach($data2 as $row2) {
$id = $row2['Orderitem']['order_id']; ?>
<tr class="<?php echo $id; ?>" style="display:none;">
<td><?php echo h($row2['Product']['productno']); ?></td>
<td><?php echo h($row2['Product']['name']); ?></td>
<td><?php echo h($row2['Product']['price']); ?></td>
<td><?php echo h($row2['Orderitem']['quantity']); ?></td>
<td><?php echo h($row2['Orderitem']['subtotal']); ?></td>
</tr>
<?php } ?>
</table>

(略)

投稿日時 - 2011-06-13 02:12:00

QNo.6805740

すぐに回答ほしいです

質問者が選んだベストアンサー

displayの値がblockだと、単純なボックスになるけど
display:table-row;
で、HTMLで言うところのtrになる。この場合table-cellかも。
displayで指定するのは、見せる見せないではなく、それをどのような要素にするかということ。

9.2.5 'display'プロパティ(The 'display' property) ( http://www.swlab.it.okayama-u.ac.jp/man/rec-css2/visuren.html#display-prop )

いちいちIDで指定していたら、同じ指定をたくさん書かなくてはならない。(CSSのCSSたる)カスケーディングをうまく使う。=継承されるプロパティ、詳細度、要素セレクタ、子孫セレクタ、隣接セレクタ、クラスセレクタ、擬似クラスセレクタ、擬似要素・・・

 下は、thにホーバーすると、tdを見せる方法。table全体とか、様々に使える。visibilityをつかっても良いかな・・

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja">
<head>
<meta http-equiv="content-type" content="text/html; charset=Shift_JIS">
<title>サンプル</title>
<meta name="author" content="ORUKA1951">
<meta http-equiv="Content-Style-Type" content="text/css">
<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" >
<link rel="START" href="../index.html">
<style type="text/css">
<!--
table[summary=focus]{border-collapse:collapse;}
table[summary=focus],table[summary=focus] th,table[summary=focus] td{border:solid 1px gray;}
table[summary=focus] tr.test td{display:none;}
table[summary=focus] tr.test th:hover+td,
table[summary=focus] tr.test th:hover+td+td{display:table-cell;}

-->
</style>
</head>
<body>
<h1>サンプル</h1>
<table summary="focus" >
<tbody>
<tr>
<th abbr="見出し">見出し</th><th abbr="見出し2">見出し</th><th abbr="見出し3">見出し</th>
</tr>
<tr>
<th abbr="a">値</th><td>123</td><td>456</td>
</tr>
<tr class="test">
<th abbr="a">値</th><td>123</td><td>456</td>
</tr>
<tr>
<th abbr="a">値</th><td>123</td><td>456</td>
</tr>
</tbody>
</table>
</body>
</html>

投稿日時 - 2011-06-13 08:52:07

お礼

御指摘の方法でうまくいくようになりました。
添付コードも参考にさせていただきます。
ありがとうございました。

投稿日時 - 2011-06-13 15:24:35

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

回答(1)

あなたにオススメの質問