Como faço para obter o IE7 para imprimir isso corretamente com colunas escondidas pelo CSS?

Question

Observe que isso parece ser um problema nas versões 7 do Internet Explorer 7 e inferior. Aqui está uma versão confusa do meu 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>

Então, estou incluindo uma folha de estilo "impressão", assim:

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

E essa folha de estilo inclui o seguinte:

.hidden_col {
    display: none;
}

Agora, em praticamente todos os outros navegadores, incluindo o IE8, isso funciona bem. Na tela, você vê a primeira coluna, na pré -visualização de impressão que não. Mas, por algum motivo, o IE7 se comporta de maneira estranha. Ele exibe as coisas normalmente na tela, é claro, mas quando você vai para a pré -visualização do IE7, a única coisa que mostra é "descrição mais longa". Então, em outras palavras, ele esconde a primeira coluna e também esconde a segunda coluna. Como faço para fazer isso funcionar em todos os navegadores?

Answer 1

O que acabei fazendo é simplesmente especificar as larguras nas próprias células e não usar o <colgroup> mais. Não está ideal em minha mente, então deixarei essa pergunta aberta por um tempo, caso qualquer um possa encontrar uma solução melhor, mas funcionou. Aqui estava o meu HTML final:

<table>

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

</table>

Answer 2

Você não pode ocultar um único elemento de uma tabela, os elementos dentro de uma tabela podem usar apenas as propriedades de exibição CSS que começam com 'Table-', pelo menos elas só deveriam. Ver isto Para maiores informações.

EDIT: Eu suponho que seu problema é apenas uma falha de usar propriedades que você não deveria estar usando.

Answer 3

Experimente o seguinte: (não testado)

td .hidden_col{
    display: none;
}

Por algum motivo no modo de impressão, pode haver uma continuação com os estilos CSS no modo de impressão em algum navegador.