title: Why do table cell borders disappear in Google Chrome when setting "visibility:hidden;" and "border-collapse: collapse;"?
body: <p>I am a trying to style a HTML table using CSS. I need the ability to hide the content of single cells through CSS, since in the print layout (or with any other stylesheet) their  content has to be visible.
  The table has a <code>&lt;thead&gt;</code> and a <code>&lt;tbody&gt;</code> section which, along each <code>&lt;tr&gt;</code>, <code>&lt;th&gt;</code> and <code>&lt;td&gt;</code>, have a border applied to them, so that so matter what I hide, the borders (even the outer ones) will always be shown.</p>
  
  <p>In my stylesheet I set <code>border-collapse: collapse;</code> and the hide the cells I want to hide with <code>visibility:hidden;</code>, which works fine on most browsers, except Google Chrome (and some minor display glitches in Firefox, but I presume they come from the percentage in the widths..).</p>
  
  <p>I also created a example of this behaviour:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>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%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="example" id="Demo1"&gt;
    &lt;thead&gt;
      &lt;tr class=" example"&gt;
        &lt;th class="Col1 example"&gt;&lt;/th&gt;&lt;th class="Col2 example"&gt;Title1&lt;/th&gt;&lt;th class="Col3 example"&gt;Title2&lt;/th&gt;&lt;th class="Col4 example"&gt;Title3&lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;&lt;tbody&gt;
    &lt;tr class="r1 example odd first"&gt;
      &lt;td class="Col1 example"&gt;&lt;img src="image.png" alt="test" height="15px" width="15px"&gt;&lt;/td&gt;&lt;td class="Col2 example"&gt;&lt;a href="#" class="detaillink"&gt;        2865             &lt;/a&gt;&lt;/td&gt;&lt;td class="Col3 example Date"&gt;10.06.2011&lt;/td&gt;&lt;td class="Col4 example Date"&gt;10.07.2011&lt;/td&gt;
    &lt;/tr&gt;&lt;tr class="r2 example even"&gt;
    &lt;td class="Col1 example"&gt;&lt;img src="image.png" alt="test" height="15px" width="15px"&gt;&lt;/td&gt;&lt;td class="Col2 example"&gt;&lt;a href="#" class="detaillink"&gt;        2864             &lt;/a&gt;&lt;/td&gt;&lt;td class="Col3 example Date"&gt;10.06.2011&lt;/td&gt;&lt;td class="Col4 example Date"&gt;10.07.2011&lt;/td&gt;
    &lt;/tr&gt;&lt;tr class="r3 example odd"&gt;
    &lt;td class="Col1 example hideme"&gt;&lt;img src="image.png" alt="test" height="15px" width="15px"&gt;&lt;/td&gt;&lt;td class="Col2 example hideme"&gt;&lt;a href="#" class="detaillink"&gt;        2863             &lt;/a&gt;&lt;/td&gt;&lt;td class="Col3 example hideme Date"&gt;10.06.2011&lt;/td&gt;&lt;td class="Col4 example hideme Date"&gt;10.08.2011&lt;/td&gt;
    &lt;/tr&gt;&lt;tr class="r4 example even"&gt;
    &lt;td class="Col1 example"&gt;&lt;img src="image.png" alt="test" height="15px" width="15px"&gt;&lt;/td&gt;&lt;td class="Col2 example"&gt;&lt;a href="#" class="detaillink"&gt;        2863             &lt;/a&gt;&lt;/td&gt;&lt;td class="Col3 example Date"&gt;10.06.2011&lt;/td&gt;&lt;td class="Col4 example Date"&gt;10.08.2011&lt;/td&gt;
    &lt;/tr&gt;&lt;tr class="r5 example odd"&gt;
    &lt;td class="Col1 example"&gt;&lt;img src="image.png" alt="test" height="15px" width="15px"&gt;&lt;/td&gt;&lt;td class="Col2 example"&gt;&lt;a href="#" class="detaillink"&gt;        2299             &lt;/a&gt;&lt;/td&gt;&lt;td class="Col3 example Date"&gt;10.05.2011&lt;/td&gt;&lt;td class="Col4 example Date"&gt;10.06.2011&lt;/td&gt;
    &lt;/tr&gt;&lt;tr class="r6 example even"&gt;
    &lt;td class="Col1 example null"&gt;&lt;/td&gt;&lt;td class="Col2 example null"&gt;&lt;/td&gt;&lt;td class="Col3 example Date null"&gt;&lt;/td&gt;&lt;td class="Col4 example Date null"&gt;&lt;/td&gt;
    &lt;/tr&gt;&lt;tr class="r7 example odd"&gt;
    &lt;td class="Col1 example"&gt;&lt;img src="image.png" alt="test" height="15px" width="15px"&gt;&lt;/td&gt;&lt;td class="Col2 example"&gt;&lt;a href="#" class="detaillink"&gt;        1249             &lt;/a&gt;&lt;/td&gt;&lt;td class="Col3 example Date"&gt;10.03.2011&lt;/td&gt;&lt;td class="Col4 example Date"&gt;10.04.2011&lt;/td&gt;
    &lt;/tr&gt;&lt;tr class="r8 example even"&gt;
    &lt;td class="Col1 example"&gt;&lt;img src="image.png" alt="test" height="15px" width="15px"&gt;&lt;/td&gt;&lt;td class="Col2 example"&gt;&lt;a href="#" class="detaillink"&gt;        1248             &lt;/a&gt;&lt;/td&gt;&lt;td class="Col3 example Date"&gt;10.03.2011&lt;/td&gt;&lt;td class="Col4 example Date null"&gt;&lt;/td&gt;
    &lt;/tr&gt;&lt;tr class="r9 example odd"&gt;
    &lt;td class="Col1 example"&gt;&lt;img src="image.png" alt="test" height="15px" width="15px"&gt;&lt;/td&gt;&lt;td class="Col2 example null"&gt;&lt;/td&gt;&lt;td class="Col3 example Date"&gt;10.02.2011&lt;/td&gt;&lt;td class="Col4 example Date"&gt;10.03.2011&lt;/td&gt;
    &lt;/tr&gt;&lt;tr class="r10 example even last"&gt;
    &lt;td class="Col1 example"&gt;&lt;img src="image.png" alt="test" height="15px" width="15px"&gt;&lt;/td&gt;&lt;td class="Col2 example"&gt;&lt;a href="#" class="detaillink"&gt;         563             &lt;/a&gt;&lt;/td&gt;&lt;td class="Col3 example Date"&gt;10.02.2011&lt;/td&gt;&lt;td class="Col4 example Date"&gt;20.03.2011&lt;/td&gt;
    &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see if you try this code, it even collapses the row with all cells hidden down to a small space.</p>
  
  <p>This issue is not really critical for my current project, since most of the users will be on Internet Explorer, but since I couldn't find any solution and this problem might be affecting me in the future (and I'm sure other people have already run into this issue), I would really like to know why this is happening.</p>