我正在尝试使用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,但由于我找不到任何解决方案,而且这个问题可能会在未来影响我(我相信其他人已经遇到了这个问题),我真的很想知道为什么会发生这种情况。
更新1
如果您的TD只显示文本,您可以尝试此
文本缩进:-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>
设置tr和td的边界似乎可以帮我解决问题。
.collateral-tabs .std tr,
.collateral-tabs .std td {
border: 1px solid #333;
}