Question

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

从上面我的理解是，如果我做类似下面的代码片段，结果应该是这样的：

但它显示如下：

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

Answer 1

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

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

＆＃13;

table tbody tr {
  visibility: collapse;
}

.red {
  background-color: red;
}

＆＃13;

<!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>

＆＃13;

了解可见性：根据W3C文档

注意

1 个答案: