Question

请注意，这似乎只是Internet Explorer 7及更低版本中的问题。这是我的HTML的一个愚蠢的版本：

<table>

<colgroup>
<col width="20" class="hidden_col" />
<col width="50" />
<col />
</colgroup>

<tr>
<td class="hidden_col"><input type="checkbox" /></td>
<td>Title</td>
<td>Longer Description</td>
</tr>

</table>

然后，我将包括一个“打印”样式表，如下所示：

<link rel="stylesheet" type="text/css" href="print.css" media="print" />

该样式表包括以下内容：

.hidden_col {
    display: none;
}

现在几乎所有其他浏览器，甚至包括IE8，这都可以。在屏幕上，您会看到第一列，在打印预览中则没有。但出于某种原因，IE7表现得非常奇怪。它当然会在屏幕上正常显示，但是当您在IE7中打印预览时，唯一显示的是“更长的描述”。换句话说，它隐藏了第一列，它也隐藏了第二列。如何在所有浏览器中使用它？

Answer 1

你不能隐藏表的单个元素，表中的元素只能使用以'table-'开头的CSS显示属性，至少它们只是应该使用。有关详细信息，请参阅this。

编辑：我认为你的问题只是使用你不应该使用的属性的一个小问题。

Answer 2

试试这个:(未经测试）

td .hidden_col{
    display: none;
}

由于某种原因，在打印模式下，某些浏览器可以在打印模式下继续使用CSS样式。

Answer 3

我最终做的只是指定单元格本身的宽度，而不再使用<colgroup>。在我看来并不理想，所以如果有人能提出更好的解决方案，我会暂时搁置这个问题，但它确实有效。这是我的最终HTML：

<table>

<tr>
<td width="20" class="hidden_col"><input type="checkbox" /></td>
<td width="50">Title</td>
<td>Longer Description</td>
</tr>

</table>

如何让IE7使用CSS隐藏的列正确打印？<table> </table>

3 个答案: