MozillaZine.jp フォーラム
https://forums.mozillazine.jp/

colタグのdisplayスタイルシート対応について
https://forums.mozillazine.jp/viewtopic.php?f=30&t=6801		 ページ 1 ／ 1
作成者:  zxcv [ 2007年12月21日(金) 15:01 ]
記事の件名:  colタグのdisplayスタイルシート対応について
自分で手書きHTMLのWebページを作成しています。

HTML中のテーブルの列の非表示・再表示を高速に行いたくて、スタイルシートの「display: none;」を試してみました。

自分の WinXP 環境でテストしたところ、InternetExplorer ではうまくいきます。

しかし、同じWinXP のFirefox 2.0.0.11 の場合にうまくいきません。 tdタグに上記の display を書くと希望通りそのセルが非表示になるのですが、col タグや colgroupタグに書いても何も起らないのです。 そういう仕様なんでしょうか？

以下は、上で書いたことを確認するためのHTMLです。

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html>
<head>
<title>テーブル列非表示</title>
</head>

<body>
<h1>テーブル列非表示</h1>

<p>
第2列を
<button type="button" onclick="document.all.target.style.display = 'none';">非表示</button>
<button type="button" onclick="document.all.target.style.display = '';">表示</button>
</p>

<p>
中央セルを
<button type="button" onclick="document.all.centerCell.style.display = 'none';">非表示</button>
<button type="button" onclick="document.all.centerCell.style.display = '';">表示</button>
</p>

<table border="1">
<col><col id="target"><col><col style="display: none;">
<tr><td>常に</td><td>ボタンで</td><td>****</td><td>常に</td></tr>
<tr><td>表示</td><td id="centerCell">切り替え</td><td>####</td><td>非表示</td></tr>
<tr><td>される</td><td>られる</td><td>@@@@</td><td>だよ</td></tr>
</table>
</body>
</html>
作成者:  dynamis [ 2007年12月21日(金) 15:11 ]
記事の件名:  Re: colタグのdisplayスタイルシート対応について
非常に有名な FAQ ですね。
一言で言うとそれが CSS の仕様です。

CSS での指定は原則として子孫の要素にのみ継承されます。
td 要素は col や colgroup タグの子ではないので、基本的には継承されません。
width など一部のプロパティのみが例外的に継承？されます。
http://www.w3.org/TR/REC-CSS2/tables.html#q4
http://www.y-adagio.com/public/standard ... es.html#q4

ちなみに、document.all も IE 独自仕様です。
作成者:  zxcv [ 2007年12月21日(金) 15:43 ]
記事の件名:  Re: colタグのdisplayスタイルシート対応について
とても素早いご回答、ありがとうございます。

mizillaのフォーラムを display none で検索はしたのですが、FAQだったとは。 失礼しました。

ご紹介頂いたサイトを見ていて、colタグに visibility: collapse と書けば目的が達成できることを発見しました。 実際、テストも成功しました。 重ねてありがとうございます。


# しかし、IE は visibility: collapse に対応してないんですね。 やはり、CGIでブラウザを判定して visibility: collapse と display: none を切り替えることになりそうです。
作成者:  dynamis [ 2007年12月21日(金) 16:16 ]
記事の件名:  Re: colタグのdisplayスタイルシート対応について
Web 開発としては FAQ ですがこのフォーラムでは該当トピックなかったかも。(^^;
しかもそもそもの問題解決法を提示してなかったですね。
# 不親切な解答でごめんなさいでした。

解決策としては一番単純なのは該当列の td に class="targetCol" などの Class を指定し、prototype.js の getElementsByClassName で当該クラス要素リストを取得し、配列中の各要素についてループで display プロパティ変更かな。

これだけのために prototype.js 丸ごと導入するのは大げさなら、該当関数だけ抜き出しましょう。
あるいは、速度も何も気にしないで単純化したいだけならこんな関数で:
コード:
function getElementsByClassName(className) {
  var list= [], all = document.getElementsByTagName("*");
  for (i = 0; i < all.length; i++) {
    if (all[i].className == className) {
      list[list.length] = all[i];
    }
  }
  return list;
}

こういうのは遅いからあくまでも単発的に使う場合だけで。

DOM3 XPath サポートしているブラウザ限定なら XPath 使う方が高速かつエレガントですが、サポートブラウザが限られるので割愛。

取り敢えずこのご時世、CGI でのクライアント判別は止めましょう。(^^;
作成者:  zxcv [ 2007年12月21日(金) 23:33 ]
記事の件名:  Re: colタグのdisplayスタイルシート対応について
すみません。 私自身 javascript は入門学習中の身でありながら、対象列中の 全 TD を操作するのがどうもイヤで悪あがきをしてみました。

コード:
 try{ document.getElementById('target').style.visibility = 'collapse'; }
          catch(e) {document.getElementById('target').style.display = 'none';}


ここで、 "target" は COLタグに付けた id です。

Firefox でも InternetExplorer でもうまく行く様で、一般的に言うと以下の両方に対応というところです。

1 visibility = 'collapse' に対応する環境

2 visibility = 'collapse' がエラーを返し、display = 'none' がIEコンパチの動作をする環境

クライアントの判別よりはマシだと思うのですが、いかがなものでしょうか？


P.S. 今回のテーマには影響ありませんが、Firefoxの以下の挙動は少し不審に感じます。

1 COLタグに visibility = 'hidden' しても何も起らない。

2 COLタグに display = 'none'; visibility = 'collapse' すると、表示抑止される列が右に 1個ずれる。
ページ 1 ／ 1 All times are UTC + 9 hours
Powered by phpBB® Forum Software © phpBB Group
http://www.phpbb.com/