来自 W3C 的动态行列效果 https://www.w3.org/TR/CSS22/tables.html#dynamic-effects
此折叠值会导致整个行或列从显示中删除，并且通常由行或列占用的空间可用于其他内容。
从上面我的理解是，如果我执行类似下面的代码片段的操作，结果应该类似于：
但它显示的是这样的：
table tr td {
visibility: collapse;
}
.red {
background-color: red;
}
/* All the below don't work as well. */
table tr td:first-child {
visibility: collapse;
}
table colgroup col {
visibility: collapse;
}
table colgroup {
visibility: collapse;
}
/* Works but I am trying to understand the why the column doesn't work as
intended */
/* table tr {
visibility: collapse;
} */
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table>
<colgroup>
<col class="red">
<col>
</colgroup>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 11</td>
<td>Data 12</td>
</tr>
</tbody>
</table>
<p>Should show below the header row</p>
</body>
</html>
Note
我也尝试过将崩溃应用于table tr td:first-child, table colgroup and table colgroup col但无济于事。但是，如果我应用折叠table tr然后该段落将按预期显示在页面顶部。
此外，我知道我可以通过以下方式达到预期结果display: none;，但我试图弄清楚我是否误解了文档中的某些内容。另外，我在 Chrome、Firefox 和 Edge 上尝试过代码，结果都是一样的。
JSFiddle https://jsfiddle.net/m3x6rfbo/5
你好@ZerosAndOnes，你正在申请visibility: collapse; to td。但你需要将此属性应用于tr.
visibility: collapse for table行、列、列组和行组、行
或列被隐藏，它们占用的空间是
已删除（就好像显示：没有应用于
桌子）。然而，其他行和列的大小仍然是
计算方式就像折叠的行或列中的单元格一样
存在。该值允许快速删除行或列
从表格中获取，而不强制重新计算宽度和高度
对于整个表。
table tbody tr {
visibility: collapse;
}
.red {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<table>
<colgroup>
<col class="red">
<col>
</colgroup>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Data 11</td>
<td>Data 12</td>
</tr>
</tbody>
</table>
<p>Should show below the header row</p>
</body>
</html>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
