I am trying to create an HTML table using CSS. I need the ability to hide the contents of individual cells through CSS, because in the print layout (or any other stylesheet) their contents should be visible. The table has a section <thead> and <tbody> , which for each <tr> , <th> and <td> has a bound to them, so it is so important that I hide, the borders (even external ones) will always be shown.
In my stylesheet, I set border-collapse: collapse; and hide the cells that I want to hide with visibility:hidden; which works fine in most browsers other than Google Chrome (and some minor display crashes in Firefox), but I suppose they come from a percentage in width.).
I also created an example of this behavior:
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, by trying this code, it even breaks the row with all cells hidden to a small place.
This problem is not very important for my current project, since most users will be in Internet Explorer, but since I could not find any solution, this problem may affect me in the future (and I'm sure other people have already encountered this problem ), I would really like to know why this is happening.
source share