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

解決済

質問者：tmiyoshi
質問日時：2011/06/13 02:12
回答数：1件

テーブルで表示させている内容を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">

</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>

（略）

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： ORUKA1951
回答日時：2011/06/13 08:52

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 … )

いちいち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">

</style>
</head>
<body>
<h1>サンプル</h1>
<table summary="focus" >
<tbody>
<tr>
<th abbr="見出し">見出し</th><th abbr="見出し２">見出し</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>