了解可见性:根据W3C文档在表格列上折叠 [英] Understanding visibility: collapse on table column according to W3C documentation
问题描述
从W3C的
但是相反，它显示为:
table tr td {能见度:崩溃；}.红色的 {背景颜色:红色；}/*以下所有内容均无法正常运行.*/表tr td:第一个孩子{能见度:崩溃；}表格colgroup col {能见度:崩溃；}colgroup表{能见度:崩溃；}/*可以，但是我试图理解为什么该列不起作用的原因故意的 *//*表tr {能见度:崩溃；} */ <！DOCTYPE html>< html>< head>< title></title></head><身体>< table>< colgroup>< col class ="red">< col></colgroup>< thead>< tr><标题1</th>< header 2</th></tr></thead>< tbody>< tr>< td>数据11</td>< td>数据12</td></tr></tbody></table>< p>应显示在标题行</p>的下方.</body></html> 注意
我也尝试过对 table tr td:first-child ， table colgroup 和 table colgroup col 应用折叠，但无济于事.但是，如果我在 table tr 上应用折叠，则该段落将按预期显示在页面顶部.
此外，我知道我可以通过 display:none; 达到预期的结果，但是我试图找出是否对文档有误解.此外，我已经在Chrome，Firefox和Edge上尝试了该代码，结果在所有代码上都是相同的.
您好@ZerosAndOne您要对 td 应用 visibility:crash; .但您需要将此属性应用于 tr .
可见性:或列被隐藏，它们本来会占用的空间是删除(好像显示:没有应用于列的行/行)桌子).但是，其他行和列的大小仍然是就像折叠的行或列中的单元格一样进行计算存在.此值允许快速删除行或列从表中进行而不必强制重新计算宽度和高度整个桌子.表行，列，列组和行组(行)的折叠
表tbody tr {能见度:崩溃；}.红色的 {背景颜色:红色；} <！DOCTYPE html>< html>< head>< title></title></head><身体>< table>< colgroup>< col class ="red">< col></colgroup>< thead>< tr><标题1</th>< header 2</th></tr></thead>< tbody>< tr>< td>数据11</td>< td>数据12</td></tr></tbody></table>< p>应显示在标题行</p>的下方.</body></html> From W3C's Dynamic rows and column effects
This collapse value causes the entire row or column to be removed from the display, and the space normally taken up by the row or column to be made available for other content.
From above what I understand is that if I do something like the snippet below, the result should be something like:
But instead it shows like:
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
I have also tried applying collapse to table tr td:first-child, table colgroup and table colgroup col but to no avail. However, if I apply collapse on table tr then the paragraph shows at the top of the page as expected.
Additionally, I know I can achieve the intended result with display: none;, but I am trying to instead figure out if I am misunderstanding something from the doc. Additionally, I have tried the code on Chrome, Firefox and Edge, and the result is same on all.
Hello @ZerosAndOnes you are applying visibility: collapse; to td. but you need to apply this property to tr.
visibility: collapsefortablerows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display: none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire 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>
这篇关于了解可见性:根据W3C文档在表格列上折叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
