Imprimer un tableau HTML avec de nombreuses colonnes / lignes en utilisant la mise en page CSS?
Je veux imprimer un grand tableau (si grand que ses lignes mesurent environ 3 feuilles de papier) à partir du HTML. Si possible, CSS devrait suffire pour la mise en page et la solution devrait fonctionner avec différents navigateurs.
Je suis en train de définir les règles de style suivantes:
table { page-break-inside:auto; }
tr { page-break-inside:auto; }
Lorsque j'inspecte les éléments DOM, par exemple dans Firefox 33.0.2 (sous OS X) je peux voir que les règles sont reconnues, mais quand je regarde un aperçu avant impression ( Fichier | Imprimer | [~ # ~] pdf [~ # ~] | Ouvrir PDF dans l'aperçu) toutes les colonnes qui ne tiennent pas sur la première page sont coupées, c'est-à-dire que je reçois 1 page de sortie imprimée au lieu de 3. J'ai également essayé Internet Explorer 11 et 10 dans le même sens.
Alors, comment puis-je disposer de grands tableaux HTML (finalement grands en termes de colonnes et de lignes) pour les imprimer en utilisant CSS?
Question bonus: Si les composants de style saut de page ne s'appliquent en effet qu'aux éléments de niveau bloc comme indiqué dans la réponse précédente this , cela aiderait-il si je construis ma table à partir de divs au lieu de tds lorsque vous visez une sortie d'impression?
[~ # ~] mise à jour [~ # ~]
Voici un échantillon pertinent que je viens d'essayer sur JSFiddle. (Je n'ai pas de compte là-bas, donc FWIK je ne peux pas fournir de lien direct.)
HTML:
<body>
<table>
<tr>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</td>
<td>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</td>
</tr>
</table>
</body>
CSS:
table { page-break-inside:auto; }
td { border:1px solid lightgray; }
tr { page-break-inside:auto; }
Si j'essaie d'imprimer ce tableau (par exemple en appliquant Ce cadre | Cadre d'impression ... | [~ # ~] pdf [~ # ~] | Ouvrir PDF dans l'aperçu vers la vue Résultat de JSFiddle dans Firefox 33.1 pour OS X et pour Format/Orientation du papier A4/Portrait ) J'obtiens une page de sortie. Toutes les colonnes sauf la première et une partie de la seconde sont coupées.
Vous devez absolument vous éloigner d'un tableau si vous avez besoin d'une impression verticale lisible sur la page. Les tableaux sont parfaits pour l'affichage sur la page lorsqu'il s'agit de données tabulaires mais ne sont pas une solution viable pour l'impression car ils ne respectent pas le flux.
Il existe des plugins (comme celui-ci ici, pas d'affiliation - juste un résultat Google ) qui le feront automatiquement pour vous, mais voici l'exemple. Lorsque vous l'utilisez, assurez-vous que le @media print Est correctement répertorié. Pour tester localement, vous pouvez changer cela en @media screen.
Cela n'affichera pas les règles @page Répertoriées, mais celles-ci sont visibles via un aperçu avant impression.
J'espère que cela t'aides:
Violon pour l'impression en portrait
[~ # ~] html [~ # ~]
<section class="table">
<div class="row">
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_0</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_1</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_2</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_3</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_4</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_5</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_6</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_7</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_8</div>
<div>The_quick_brown_fox_jumped_over_the_lazy_dog_A_9</div>
</div>
</section>
[~ # ~] css [~ # ~]
@media print {
@page {
margin: 2.5cm;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.2cm;
}
div.row {
display: block;
}
}
.table {
display: table;
border-spacing: 2px;
}
.row {
display: table-row;
}
.row > div {
display: table-cell;
border: solid 1px #ccc;
padding: 2px;
}
Édition - Impression horizontale sur plusieurs pages:
D'accord, c'est probablement un cas d'utilisation beaucoup moins courant, et nous devons faire des choses loufoques avec lui - donc juste avertissement. J'essaierai d'expliquer cela étape par étape car c'est cryptique et désagréable.
Violon pour l'impression en paysage ici!
[~ # ~] css [~ # ~]
@media print {
@page {
margin: 0;
}
body {
height: 100%;
width: 100%;
}
div.row > div {
display: inline-block;
border: solid 1px #ccc;
margin: 0.1cm;
font-size: 1rem;
}
div.row {
display: block;
margin: solid 2px black;
margin: 0.2cm 1cm;
font-size: 0;
white-space: nowrap;
}
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-Origin: bottom left;
display: block;
}
}
C'est la partie qui compte, car elle définit vos directives d'impression. La plupart de ce sont des choses que nous avons vues dans l'original (avec quelques ajustements pendant que je jouais avec).
La partie qui nous tient à cœur vient ici:
.table {
transform: translate(8.5in, -100%) rotate(90deg);
transform-Origin: bottom left;
display: block;
}
Ce que nous faisons, c'est renverser le tout sur le côté, puis le faire glisser là où nous l'attendons. translate(8.5in, -100%) dit au navigateur - Faites glisser cet élément de 8,5 pouces (la largeur d'un papier à lettre standard aux États-Unis) vers la droite, puis faites-le glisser jusqu'à 100% de sa hauteur (le négatif indique vers le haut par opposition vers le bas). Nous le faisons glisser vers la droite de 8,5 pouces pour qu'il apparaisse en haut de la page lorsqu'il est tourné. Nous le faisons glisser vers le haut de sa hauteur calculée afin que nous n'ayons pas de vilain écart à gauche de la table lorsque la rotation se produit non plus.
Ensuite, nous lui indiquons que nous voulons que tous ces calculs soient exécutés par rapport au bottom left De la position normale de l'élément dans le flux de documents. Cela empêche ce long tableau fou d'être tourné loin vers la droite en définissant la propriété left. La propriété bottom est importante car nous la faisons tourner d'un quart de tour dans le sens des aiguilles d'une montre, et si nous faisions cela depuis le haut, ce serait hors de la page vers la gauche. Ce quart de tour est décrit dans la partie suivante de l'instruction transform: rotate(90deg);
Voila. La chose s'imprime sur plusieurs pages.
Avant de demander : Non. Il n'y a aucun moyen d'empêcher le saut de page à l'intérieur de l'élément dont je suis conscient. Je sais que c'est désagréable, moche et toutes ces ordures, mais nous ne pouvons travailler qu'avec les outils qui nous sont donnés.
La mise à jour de Firefox a confirmé son fonctionnement: ![Firefox 33.1 on Mac]()
page-break-inside: auto; est le style par défaut, donc à moins qu'une règle ne les définisse différemment, ces règles ne feront rien.
Si votre tableau n'est pas divisé en plusieurs pages, c'est probablement parce qu'il y a une autre règle que vous avez ajoutée, ce qui l'empêche - je suppose que overflow: hidden.
Ce que vous devez d'abord faire est de supprimer les styles all et de voir si cela s'imprime sur plusieurs pages. Si oui, recommencez à ajouter vos styles (règle par règle, ou si nécessaire ligne par ligne) pour trouver le problème.
Si vous souhaitez forcer le saut de page, vous devez utiliser saut de page avant ou saut de page après. Vous devez savoir que l'élément stylisé doit contenir un élément de niveau bloc non vide et qu'il ne peut pas être positionné de manière absolue. Cependant, il est assez incohérent sur les éléments des tables. Ce qui nous amène à votre dernière question: oui, il serait plus cohérent de construire vos tables avec divs.
Cependant, compte tenu de ce que vous souhaitez réaliser (imprimer de grands tableaux horizontaux), vous devez savoir que le fait de faire tenir 3 pages en 1 ne peut pas fonctionner car votre contenu ne sera pas lisible. En fait, la seule meilleure pratique serait d'utiliser une disposition verticale à la place (uniquement pour l'impression ou pour le Web et l'impression).