web-dev-qa-db-fra.com

mettre à l'échelle le tableau html avant d'imprimer à l'aide de css

J'ai un tableau comme tout le contenu d'un document HTML (à des fins de tableau légitimes ... ce sont des données de tableau, pas pour la mise en page). Certaines cellules ont des largeurs et des hauteurs spécifiées (pas via CSS mais en utilisant l'ancien dimensionnement en ligne dans une structure de tableau), mais le tableau global n'a pas de largeur ou de hauteur spécifié. Il s'agit d'un tableau assez grand, mais avec une mise à l'échelle appropriée (environ 70%), il peut être imprimé pour s'adapter parfaitement à une seule feuille de papier. Cela peut être accompli en utilisant le scale page fonctionne dans les paramètres d'imprimante d'IE, Firefox et Chrome. Existe-t-il un moyen de mettre à l'échelle la page entière (qui dans mon cas est juste ce tableau) dans le cadre d'une feuille de style d'impression (je connais @media print {} mais les instructions sont ignorées ... le problème est avec les commandes appropriées pour la mise à l'échelle, pas avec la configuration du CSS d'impression)? Je peux mettre à l'échelle la vue à l'écran avec ceci:

body {
   transform: scale(.7);
}

cependant lors de l'impression, Chrome (et autres) ne tient pas compte de mon échelle et redimensionne automatiquement le tableau en fonction de la largeur du papier, ce qui entraîne le fractionnement de mon tableau sur une deuxième page. J'ai essayé d'appliquer cela aussi sans succès:

table {page-break-inside: avoid;}
csshtml-tableprinting-web-page
20
techtheatre

J'ai fini par réécrire la table entière avec des tailles de pourcentage appliquées en tant que classes, puis j'ai pu mettre la page à l'échelle pour l'impression. Je ne sais pas pourquoi le navigateur ignorait mes styles d'impression concernant la transformation, mais la conversion du tableau de tailles fixes en tailles proportionnelles m'a permis de le mettre à l'échelle avec CSS et le problème a disparu.

9
techtheatre

Vous devez utiliser les types de supports

@media print {
    body {transform: scale(.7);}
    table {page-break-inside: avoid;}
}

Ainsi, ces styles seront appliqués uniquement en mode aperçu avant impression. http://www.w3.org/TR/CSS21/media.html

14
Dmitry

Je sais que je ressuscite les morts, mais pour les futurs résultats de recherche, référence:

Je suis tombé sur un problème avec des tableaux super larges provoquant tous les navigateurs à calculer la hauteur incorrectement et à répéter la tête plusieurs fois sur des pages uniques - ma solution était d'appliquer un zoom: 80% au corps (le pourcentage varie en fonction de vos besoins), ce qui a forcé notre page pour s'adapter efficacement à l'impression et la tête a ensuite été répétée correctement en haut de chaque page. Peut-être que l'essai du zoom fonctionnera là où la transformation n'a pas fonctionné.

7
TerraElise