了解可见性：根据 W3C 文档折叠表格列答案

【问题标题】：Understanding visibility: collapse on table column according to W3C documentation了解可见性：根据 W3C 文档折叠表格列
【发布时间】：2018-05-19 08:15:12
【问题描述】：

来自 W3C 的Dynamic rows and column effects

此折叠值会导致整个行或列从显示中移除，并且通常由行或列占用的空间可用于其他内容。

从上面我的理解是，如果我做类似下面的 sn-p 的事情，结果应该是这样的：

但它却显示为：

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>

注意

我也尝试将折叠应用于table tr td:first-child、table colgroup 和table colgroup col，但无济于事。但是，如果我在 table tr 上应用折叠，则该段落将按预期显示在页面顶部。

此外，我知道我可以使用display: none; 达到预期的结果，但我试图找出我是否误解了文档中的某些内容。另外，我在 Chrome、Firefox 和 Edge 上试过代码，结果都是一样的。

JSFiddle

【问题讨论】：

标签： css css-tables w3c

【解决方案1】：

您好@ZerosAndOnes，您正在将visibility: collapse; 应用到td。但您需要将此属性应用于tr。

visibility: collapse 对于 table 行、列、列组和行组，行或列被隐藏，它们将占用的空间是已删除（好像 display: none 应用于桌子）。但是，其他行和列的大小仍然是就像折叠的行或列中的单元格一样计算存在。此值允许快速删除行或列从表中，而不强制重新计算宽度和高度整个表。

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>

【讨论】：

感谢您的回答。但是，引用内容为“可见性：表行、columns、列组和行组、行或column(s) 的折叠”，据我从这一行了解到，它也应该适用于 td .关于tr，我已经在问题说明中提到了。
no @ZerosAndOnes 它不适用于td。 td 是表格单元格。
那为什么它不能在colgroup 或col 上工作呢？ jsfiddle.net/m3x6rfbo/3
它可以在 Firefox 上运行，但是没有错误 bugs.chromium.org/p/chromium/issues/detail?id=174167
Firefox 的哪个版本？我已经尝试了jsfiddle.net/m3x6rfbo/5 中的各种选择器，但该段落仍然没有调整其位置。我在 59.0.3 和 60.0.1 上试过。此外，该错误与行和列有关。如前所述，对于 row，即使在 chrome 上也能正常工作。