ramsesoriginal ramsesoriginal - 5 months ago 15
CSS Question

Why do table cell borders disappear in Google Chrome when setting "visibility:hidden;" and "border-collapse: collapse;"?

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

<thead>
and a
<tbody>
section which, along each
<tr>
,
<th>
and
<td>
, have a border applied to them, so that so matter what I hide, the borders (even the outer ones) will always be shown.
In my stylesheet I set
border-collapse: collapse;
and the hide the cells I want to hide with
visibility:hidden;
, 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..).

I also created a example of this behaviour:



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>





As you can see if you try this code, it even collapses the row with all cells hidden down to a small space.

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.

Answer

Update 1

If your TD are displaying only text, you can try this

text-indent:-9999px;

Not sure about browser compatibility though, and it should only affect inline elements. No need to remove visibility with this.


Put a div inside each cell, this div will contain the elements that you have now in your cell, and then set visibility:hidden to that div only.

Example

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