trの中のtrがdisplay:none;で消えない

Question

trの中のtrがdisplay:none;で消えません。
外側のtrのclass内にdisplay:none;を書いているのですが、消えないようです。
よくわからないのは、trの中がtr以外の要素、例えばdivやulだと消えます。
一体なぜなのでしょうか?よろしくおねがいいたします。

---

追記

具体的には、以下のようなコードになります。

<table>
  <tr>
    <td>aa</td>
    <td>aa</td>
    <td>aa</td>
  </tr>
  <tr class="displaynone">
    <tr>
      <td>a</td>
      <td>a</td>
      <td>a</td>
    </tr>
  </tr>
</table>

.displaynone {
display:none;
}

Comments

[showkit]

実際どのように書いているのか コードを載せないと わかりませんが、<tr> 内に <th> や <td> 以外になにか表示可能なものを記述しているのであれば、そこが間違っているように思いますが・・・

[Lhankor_Mhy]

tr 要素の中に tr div ul を入れるのはかなりトリッキーです。やめたほうがいいのでは。

[Lhankor_Mhy]

追記拝読。当方では問題が再現しませんでした。ここに書かれていない部分のコードや、環境に問題があるのかもしれません。繰り返しになりますが、tr要素の中にtr要素を入れるのはトリッキーですからブラウザに正しく解釈されない可能性があります。やめたほうがいいのでは。

[Lhankor_Mhy]

『外側のtrのclass内にdisplay:none;を書いている』とありますが、追記のコードでは内側のtrに書いてあるように読めます。その場合は問題が再現しました。再度ご確認願います。

[nazo_o]

なるほど、ありがとうございます。コードが間違っておりました。訂正致しました。他の方法とは、具体的にどのような方法がありますでしょうか?

[Lhankor_Mhy]

HTMLの仕様にしたがってマークアップすべきかと思います。具体的なコードに関しては、実現したい状態が不明ですのでご提案しかねます。

Answer 1

よくわからないのは、trの中がtr以外の要素、例えばdivやulだと消えます。

一体なぜなのでしょうか?

ブラウザにこのように解釈されているからだと思います。

<table>
  <tr>
    <td>aa</td>
    <td>aa</td>
    <td>aa</td>
  </tr>
  <tr class="displaynone">
  </tr>
    <tr>
      <td>a</td>
      <td>a</td>
      <td>a</td>
    </tr>
</table>

ブラウザのHTML解釈は柔軟で、人間がタグの閉じ忘れなどをしても例外を返して死ぬようなことはなく、適切に閉じタグなどを補ってくれるのですが、意図しない結果になることもあります。

Comments

[nazo_o]

safariとchromeでソースコードを確認してみましたが、そのようになっていないようです。ブラウザは何でしょうか?

[Lhankor_Mhy]

firefoxですが、Chromeでも同様の解釈になることを確認しました。
あ、最後の空tr閉じタグは無視するようなので、そこは訂正しておきます。

おそらくnazo_oさんはソースコードそのものを見ているのだと思います。開発者ツールでブラウザがどのように解釈しているかを見てみてください。

Answer 2

仕様に沿ったコードに書き直してはいかがでしょう。仕様から外れたコードは予期せぬ挙動をすることが多々あります。

【tr 要素 - HTML | MDN】
https://developer.mozilla.org/ja/docs/Web/HTML/Element/tr

許可された内容 0 個以上の <td> 要素または <th> 要素、あるいはこれらを混在させたもの

---

崩れたHTMLをブラウザがどう解釈して表示しているかはデベロッパーツールで表示されるHTML構造と「ページのソースを表示」の内容を見比べるとわかるかもしれません。

【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

【第1回　詳説：デベロッパーツールの使い方：Google Chrome版Firebug：デベロッパーツール取扱説明書｜gihyo.jp … 技術評論社】
http://gihyo.jp/dev/feature/01/devtools/0001?page=2

Answer 3

おそらくですが、<tr>はテーブルの行を意味するタグのため、displayでの表示操作ができないものと思われます。
そのため、その中の<td>を表示しなくすれば良いと思われます。

.displaynone td {
display:none;
}

Comments

[Lhankor_Mhy]

それでは解決しないだろう、と思い試してみましたが、予想通り解決しなかったため、マイナス評価をします。

[8yazaki]

すいません、未検証で書き込みましたm(__)m
よく見たらLhankor_Mhyさんの回答の様にHTML側の問題のようですね。

[Lhankor_Mhy]

ご訂正いただきましたので、評価を戻しました。

Answer 4

再回答になりますm(__)m

おそらくHTML側の問題です。

<tr>の直下に<tr>がありますがこれは本来おかしい状態です。 もしやるとすれば・・・ ```HTML <table> <tr> <td>aa</td> <td>aa</td> <td>aa</td> </tr> <tr class="displaynone"> <td> <table> <tr> <td>a</td> <td>a</td> <td>a</td> </tr> </table> </td> </tr> </table> ```

もしくは

<table>
  <tr>
    <td>aa</td>
    <td>aa</td>
    <td>aa</td>
  </tr>
  <tr class="displaynone">
      <td>a</td>
      <td>a</td>
      <td>a</td>
    </tr>
</table>

この状態で、CSSを最初のものを使うと解決出来るとも思います。

.displaynone  {
display:none;
}