CSS colの可視性：Chromeでの折りたたみが機能しない

HTMLのコードにいくつかのcolを隠そうとしています。 MDN colgroupとcolを使用して追加され、私はcolsのスタイルで遊んでいます。CSS colの可視性：Chromeでの折りたたみが機能しない

<td>はすべてのブラウザで表示されます（良い）、内容のテキストが「非表示」はクロム（悪い）に表示され、FirefoxとEdgeでは非表示になります。（良い）。私は、問題を再作成することができ

最短コードはここにある：

<!doctype html> 
<html> 
    <head> 
     <title>css example</title> 
     <style type='text/css'> 
      col.visible {} 
      col.hidden { visibility:collapse; } 
     </style> 
    </head> 
    <body> 
     <table border='1'> 
      <colgroup> 
       <col class='visible'> 
       <col class='hidden'> 
       <tbody> 
        <tr> 
         <td>visible</td> 
         <td>hidden</td> 
        </tr> 
       </tbody> 
      </colgroup> 
     </table> 
    </body> 
</html>

出典

2017-02-22 Guy Dafny

あなたは正しいです、クロムは可視性を適切にサポートしていません。テーブルの行と列の折りたたみ - 更新のためにbugに従ってください。私たちは数ヶ月後にそれに取り組む予定ですが、おそらく2017年末まで安定して現れないでしょう。悪いニュースを残念に思います。

出典

2017-02-22 17:29:36 dgrogan

visibility: collapseはcolに割り当てられますが、tdするべきではありません。これは正常に動作します：

td.hidden { visibility:collapse; }

<body> 
 
     <table border='1'> 
 
      <colgroup> 
 
       <col> 
 
       <col> 
 
       <tbody> 
 
        <tr> 
 
         <td>visible</td> 
 
         <td class='hidden'>hidden</td> 
 
        </tr> 
 
       </tbody> 
 
      </colgroup> 
 
     </table> 
 
    </body>

あなたはtd:nth-of-type(n)セレクタ（列のインデックス番号でnを置き換える）を使用し、特定のcolからすべてtd Sを非表示にしたい場合。

出典

2017-02-22 15:22:18 Senthe

間違っています。 W3では、次のURLを参照してください：https://www.w3.org/Style/Examples/007/folding.en.html#view05 –

これは実際にChromeで正常に機能するため、回避策が増えています。誤った情報を申し訳ありません。 – Senthe

これはまさにdgroganが答えを書いたときのやり方です。 –

CSS colの可視性：Chromeでの折りたたみが機能しない

答えて

関連する問題