web-dev-qa-db-fra.com

Impression de tableaux HTML sans fractionner une ligne sur deux pages

J'ai besoin d'imprimer des données dans un tableau HTML à partir d'Internet Explorer (différentes versions) et de Safari sous OS X. Ignorer Safari pour le moment.

Lors de l'impression d'un tableau comportant plus de lignes que ne peut en contenir une page, la dernière ligne de la page est souvent scindée avec une partie de la ligne de la première page et le reste de la ligne de la page suivante.

Cela a l'air moche. Y a-t-il un moyen de l'éviter?

J'ai fait des recherches et jusqu'à présent, j'ai trouvé page-break-before: always, mais je ne sais pas si c'est ce que je recherche, car je ne saurai pas au préalable combien de rangées peuvent contenir sur la page. par exemple. les rangées peuvent être plus hautes ou plus courtes selon le contenu et l'utilisateur peut imprimer en mode portrait ou paysage. Je suppose au moins le format A4, mais si l'utilisateur utilisait une lettre au format US ou un autre format de papier, cela créerait encore plus d'incertitude. Aussi, qu'en est-il des marges d'imprimante?

Alors, y a-t-il un moyen de contourner cela? Ou dois-je simplement deviner combien de lignes conviendront et forcer un saut de page après cela? Est-ce que ça va marcher?

htmlcssinternet-explorerprintingsafari
16
Wodin

Vous voulez probablement jouer avec page-break-before/after: auto. page-break-inside serait idéal mais son non supporté par la plupart des navigateurs. 

Jetez un oeil ici http://www.westciv.com/style_master/academy/css_tutorial/advanced/printing.html pour de bonnes informations.

12
Mrchief

Que diriez-vous de page-break-inside:avoid ?

Il semble y avoir beaucoup de discussions à ce sujet, mais j’ai aussi trouvé un autre SO article mentionnant page-break-before:auto et s’appliquant à chaque table. cellule.

3
Brad Christie

Pour éviter d’imprimer des cellules divisées sur Safari:

tr
{
    display: block;
    page-break-inside: avoid;
    -webkit-region-break-inside: avoid; 
}
0
Flavien Volken

Quelques solutions simples existent pour empêcher les sauts de page dans les lignes, mais elles ont quelques assez grandes limitations qui tendent à les rendre inutiles pour autre chose que l'intranet.

Une solution plus polyvalente et légèrement plus compliquée peut être trouvée ici . Son principal inconvénient est qu'il nécessite des largeurs de colonne fixes.

Ma solution préférée est un peu plus compliquée, mais elle causera probablement le moins de maux de tête à la fin. Il utilise JavaScript pour transformer chaque ligne en un bloc distinct et incassable (mais pas d'une manière qui affecte l'apparence de la table). J'ai posté quelques réponses qui utilisent cette technique:

0
DoctorDestructo