Comment puis-je obtenir IE7 pour imprimer cette correctement avec des colonnes cachées par CSS?

StackOverflow https://stackoverflow.com/questions/2374164

Question

Notez que cela ne semble être un problème dans les versions d'Internet Explorer 7 et inférieure. Voici une version dumbed vers le bas de mon 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>

Alors, je suis notamment une feuille de style "d'impression", comme ceci: 

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

Et ce stylesheet comprend les éléments suivants: 

.hidden_col {
    display: none;
}

Passons maintenant à peu près tous les autres navigateurs, même y compris IE8, cela fonctionne très bien. Sur l'écran, vous voyez que la première colonne, en avant-première d'impression que vous ne le faites pas. Mais pour une raison quelconque, IE7 se comporte très bizarrement. Il affiche les choses normalement à l'écran bien sûr, mais quand vous allez à l'aperçu avant impression dans IE7, la seule chose qui montre est « plus longue description. » En d'autres termes, il cache la première colonne, et il cache également la deuxième colonne. Comment puis-je faire ce travail dans tous les navigateurs?

Était-ce utile?

La solution 3

Ce que je fini par faire est spécifiant simplement les largeurs sur les cellules elles-mêmes et ne pas utiliser le <colgroup> plus du tout. Pas idéal dans mon esprit, donc je vais laisser cette question ouverte pour tous ceux qui pendant quelque temps en cas peut trouver une meilleure solution, mais il fait le travail. Voici ma dernière était HTML: 

<table>

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

</table>

Autres conseils

Vous ne pouvez pas cacher un seul élément d'une table, éléments à l'intérieur d'une table ne peuvent utiliser les propriétés d'affichage CSS qui commencent par « table- », au moins ils ne devraient. Voir cette pour plus d'informations.

Edit: Je suppose que votre problème est juste un petit problème de l'utilisation des propriétés que vous n'êtes pas censé être en utilisant

.

Essayez ceci: (non testé) 

td .hidden_col{
    display: none;
}

pour une raison quelconque en mode d'impression, il peut y avoir une suite avec des styles CSS en mode d'impression sur un certain navigateur.

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top