visibility:collapse和之间有什么区别display:none？
Answers:
精简版：
前者用于完全隐藏表格元素。后者用于完全隐藏其他所有内容。
长版：
visibility: collapse完全隐藏一个元素（以使其不占用布局中的任何空间），但仅当该元素是一个table元素时才隐藏。
如果在表格元素以外的元素上使用，visibility: collapse将表现为visibility: hidden。这使元素不可见，但仍将占据布局中的空间。
display: none完全隐藏一个元素，因此它不会在布局中占据任何空间，但是不应在表格元素上使用它。
display: none;是因为它使用colspan和破坏了表rowspan。
visibility: collapsevisibility: hidden在大多数格式设置上下文中，其行为完全相同：元素所需的空间在布局中“保留”，但是元素本身未呈现，在原本会保留的空白处。
我知道三个例外：表行，表列和flex项，它们的visibility: collapse行为类似于display: none，但有一个主要区别：“ strut”。您可以将Strut视为大小为零的占位符，该占位符不会在布局过程中占用其任何空间，但是仍然是格式化结构的一部分，并参与了一些大小计算。
例如，折叠后的表格行不会在表格中占据任何垂直空间，但是表格列的尺寸仍将“视情况而定”，因为折叠后的行及其内容实际上是可见的。这是为了防止在行被切入和切出时列“摆动”。同样，折叠的柔韧性项目不会沿主轴占据任何空间，但仍会影响柔韧性线的交叉尺寸。
“不display: none与表一起使用”是一条宝贵的经验法则，但并不能说明全部问题。
display: none，如果你不想让你的隐藏要素参与表中的任何方式（或柔性线）布局的过程。visibility: collapse如果要动态显示并没有动摇表（或柔性线）布局隐藏元素。下面是一个代码片段演示之间的差异display: none，并visibility: collapse为一个表行：
visibility:collapse不适用于Safari中的表格。display:none尽管上面关于列宽的注释是正确的，但我发现在表行（包括Safari中）上都可以正常工作
visibility:collapse应该只在表上使用。在其他元素上，它将充当visibility:hidden。
visibility:hidden隐藏元素，但仍然占用元素的空间，而display:none什至不保留空间。
资源：
在同一主题上：
display: none不应在表元素上使用的声明进行引用或解释将是一个不错的补充。