Почему границы ячеек таблицы исчезают в Google Chrome при настройке «видимость: скрытый»;и "граница-коллапс: коллапс"?

Question

Я пытаюсь стилизовать таблицу HTML с помощью CSS. Мне нужна возможность скрывать содержимое отдельных ячеек с помощью CSS, поскольку в макете печати (или с любой другой таблицей стилей) их содержимое должно быть видимым. Таблица имеет секции <thead> и <tbody>, которые вдоль каждой <tr>, <th> и <td> имеют к ним границы, так что независимо от того, что я скрываю, границы (даже внешние из них) всегда будут показаны.

В моей таблице стилей я установил border-collapse: collapse; и скрыть ячейки, которые я хочу скрыть, с помощью visibility:hidden;, который отлично работает в большинстве браузеров, кроме Google Chrome (и некоторых незначительных сбоев отображения в Firefox, но я предполагаю, что они происходят из процент в ширину ..).

Я также создал пример такого поведения:

table.example {
  width:100%;
  border-collapse: collapse;
}

table.example td{
  padding: 2px;
}

table.example .number {
  text-align:right;
}

table.example .null{
  visibility:hidden;
}

table.example .number.negative{
  color:red;
}

table.example .Date{
  text-align:center;
}

table.example th{
  background-color: #dedbde;
}

table.example, th.example, td.example,.example thead,.example tbody{
  border: 1px solid #a5a6a5;
}

#Demo1 .hideme.Col1,
#Demo1 .hideme.Col2 {
  visibility:hidden;
  border: 0;
}

#Demo1 {
  width: 50%;
}

.Col1 {
  width: 4%;
}

.Col2, .Col3,  .Col4  {
  width: 32%;
}

<table class="example" id="Demo1">
  <thead>
    <tr class=" example">
      <th class="Col1 example"></th><th class="Col2 example">Title1</th><th class="Col3 example">Title2</th><th class="Col4 example">Title3</th>
    </tr>
  </thead><tbody>
  <tr class="r1 example odd first">
    <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">        2865             </a></td><td class="Col3 example Date">10.06.2011</td><td class="Col4 example Date">10.07.2011</td>
  </tr><tr class="r2 example even">
  <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">        2864             </a></td><td class="Col3 example Date">10.06.2011</td><td class="Col4 example Date">10.07.2011</td>
  </tr><tr class="r3 example odd">
  <td class="Col1 example hideme"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example hideme"><a href="#" class="detaillink">        2863             </a></td><td class="Col3 example hideme Date">10.06.2011</td><td class="Col4 example hideme Date">10.08.2011</td>
  </tr><tr class="r4 example even">
  <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">        2863             </a></td><td class="Col3 example Date">10.06.2011</td><td class="Col4 example Date">10.08.2011</td>
  </tr><tr class="r5 example odd">
  <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">        2299             </a></td><td class="Col3 example Date">10.05.2011</td><td class="Col4 example Date">10.06.2011</td>
  </tr><tr class="r6 example even">
  <td class="Col1 example null"></td><td class="Col2 example null"></td><td class="Col3 example Date null"></td><td class="Col4 example Date null"></td>
  </tr><tr class="r7 example odd">
  <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">        1249             </a></td><td class="Col3 example Date">10.03.2011</td><td class="Col4 example Date">10.04.2011</td>
  </tr><tr class="r8 example even">
  <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">        1248             </a></td><td class="Col3 example Date">10.03.2011</td><td class="Col4 example Date null"></td>
  </tr><tr class="r9 example odd">
  <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example null"></td><td class="Col3 example Date">10.02.2011</td><td class="Col4 example Date">10.03.2011</td>
  </tr><tr class="r10 example even last">
  <td class="Col1 example"><img src="image.png" alt="test" height="15px" width="15px"></td><td class="Col2 example"><a href="#" class="detaillink">         563             </a></td><td class="Col3 example Date">10.02.2011</td><td class="Col4 example Date">20.03.2011</td>
  </tr>
  </tbody>
</table>

Как вы можете видеть, если вы попробуете этот код, он даже свернет строку со всеми ячейками, спрятанными в маленькое пространство.

Эта проблема на самом деле не является критической для моего текущего проекта, поскольку большинство пользователей будут использовать Internet Explorer, но поскольку я не смог найти никакого решения, и эта проблема может повлиять на меня в будущем (и я уверен, другие люди уже сталкивались с этой проблемой), я действительно хотел бы знать, почему это происходит.

Answer 1

Установка границы tr, а также td, кажется, исправили это для меня.

.collateral-tabs .std tr,
.collateral-tabs .std td {
    border: 1px solid #333;
}

Answer 2

Обновление 1

Если ваш TD отображает только текст, вы можете попробовать это

text-indent: -9999px;

Не уверен насчет совместимости браузера, и он должен влиять только на встроенные элементы.С этим не нужно удалять видимость.

---

Поместите div в каждую ячейку, этот div будет содержать элементы, которые есть в вашей ячейке, а затем установите visibility:hidden только на этот div.

Пример

<tr class="r2 example even">
  <td class="Col1 example">
    <div>
      what you want to hide here...
    </div>
  </td>
</tr>