Понимание видимости: свертывание столбца таблицы в соответствии с документацией W3C - PullRequest
Новая
       7

Понимание видимости: свертывание столбца таблицы в соответствии с документацией W3C

0 голосов
/ 19 мая 2018

Из W3C Динамические эффекты строк и столбцов

При этом значении свертывания вся строка или столбец удаляется с дисплея, а пространство, обычно занимаемое строкойили столбец, который будет сделан доступным для другого контента.

Из вышеизложенного я понимаю, что если я сделаю что-то вроде приведенного ниже фрагмента, результат должен выглядеть примерно так:

enter image description here

Но вместо этого он показывает как:

enter image description here

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

1 Ответ

0 голосов
/ 19 мая 2018

Здравствуйте @ZerosAndOnes, вы применяете visibility: collapse; к td.но вам нужно применить это свойство к tr.

visibility: collapse для table строк, столбцов, групп столбцов и групп строк. Строки или столбцыскрыто, и пространство, которое они занимали бы, удаляется (как если бы display: ни один не был применен к столбцу / строке таблицы).Однако размер других строк и столбцов по-прежнему рассчитывается так, как если бы присутствовали ячейки в свернутых строках или столбцах.Это значение позволяет быстро удалить строку или столбец из таблицы без принудительного пересчета ширины и высоты для всей таблицы. 

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