html - 为什么在设置 "visibility:hidden;"和 "border-collapse: collapse;"时表格单元格边框在 Google Chrome 中消失？

Question

我正在尝试使用 CSS 设计 HTML 表格的样式。我需要能够通过 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

更新 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>