Understanding visibility: collapse on table column according to W3C documentation

问题

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.

JSFiddle

回答1:

Hello @ZerosAndOnes you are applying visibility: collapse; to td. but you need to apply this property to tr.

visibility: collapse for table rows, 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>

来源：https://stackoverflow.com/questions/50423235/understanding-visibility-collapse-on-table-column-according-to-w3c-documentatio

标签

css

css-tables

w3c