違いは何であるvisibility:collapseとはdisplay:none？
回答:
短縮版：
前者は、テーブル要素を完全に非表示にするために使用されます。後者は、他のすべてを完全に隠すために使用されます。
ロングバージョン：
visibility: collapse要素を完全に非表示にします（レイアウト内のスペースを占有しないようにします）が、要素がテーブル要素の場合のみです。
テーブル要素以外の要素で使用visibility: collapseすると、のように動作しvisibility: hiddenます。これにより要素は非表示になりますが、それでもレイアウト内のスペースを占有します。
display: none要素を完全に非表示にするため、レイアウト内のスペースを占有しませんが、テーブル要素には使用しないでください。
display: none;は、とを使用colspanしてテーブルを壊すためrowspanです。
visibility: collapsevisibility: hiddenほとんどのフォーマットコンテキストとまったく同じように動作します。要素に必要なスペースはレイアウトで「予約」されますが、要素自体はレンダリングされず、本来の場所に空白スペースが残ります。
私が知っている3つの例外があります。テーブル行、テーブル列、フレックスアイテムです。これらvisibility: collapseはのようdisplay: noneに動作しますが、大きな違いが1つあります。「ストラット」です。支柱はゼロサイズのプレースホルダーと考えることができます。これは、レイアウトプロセスで独自のスペースを要求しませんが、それでもフォーマット構造の一部であり、一部のサイズ計算に参加します。
たとえば、折りたたまれたテーブル行はテーブル内の垂直方向のスペースを占有しませんが、テーブルの列は、折りたたまれた行とその内容が実際に表示されているかのように「あたかも」ディメンション化されます。これは、行が切り替えられるときに列が「ぐらつく」のを防ぐためです。同様に、折りたたまれたフレックスアイテムは、主軸に沿ったスペースを占有しませんが、それでもフレックスラインのクロスサイズに寄与します。
「display: noneテーブルと一緒に使用しない」は貴重な経験則ですが、全体像を伝えるものではありません。
display: none非表示の要素をテーブル（またはフレックスライン）のレイアウトプロセスに参加させたくない場合に使用します。visibility: collapseテーブル（またはフレックスライン）のレイアウトを不安定にすることなく要素を動的に表示および非表示にする場合に使用します。これは、テーブル行display: noneとの違いを示すコードスニペットvisibility: collapseです。
visibility:collapseSafariのテーブルでは機能しません。私が見つかりましたdisplay:none（Safariで含む）テーブルの行の作業微細にあるが正しい幅カラムに関する上記のコメント
visibility:collapseテーブルでのみ使用する必要があります。他の要素では、として機能しますvisibility:hidden。
visibility:hidden要素を非表示にしますが、要素のスペースを取りますが、スペースはdisplay:none保持しません。
リソース：
同じトピックについて：
display: noneテーブル要素で使用してはならないクレームの引用または説明は、すばらしい追加です。