Discussion :

[coeurdange]

Bonjour,

Je souhaite imprimer une page HTML comme un fichier PDF. J'utilise l'option du navigateur CTRL+P sous Chrome et Edge. Les paramètres me permettent d’enregistrer la page en tant que PDF.

La page contient plusieurs tableaux. Un fichier CSS permet d'imprimer correctement les styles de ma page dans le fichier PDF. J'ai donc appliquer des règles spécifiques.

Je rencontre un problème avec un de mes tableaux au bas de la page. En effet il ne peut pas s'afficher entièrement sur la page à cause du contenu précédant (car le tableau est trop grand). Le tableau est alors coupé au bas de la première page (seule l'entête est affichée), l'entête est reprise sur la 2eme page avec le tableau complet. De ce fait l'entête est doublée.

Je voudrais que le tableau ne s'affiche sur la page uniquement si son contenu (body) peut pas être affiché partiellement ou totalement afin d'éviter de me retrouver dans cette situation où juste une entête apparaît.

Pourriez-vous me dire quel est le meilleur moyen d'y arriver?

J'ai essayé plusieurs règles CSS mais cela ne correspond pas à mes besoins:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
table { page-break-inside:auto !important; }
tr    { page-break-inside:avoid !important; page-break-after:auto !important; }
thead { display:table-header-group !important; }
tfoot { display:table-footer-group !important; }

J'ai également essayé ceci mais cela ne fonctionne pas sous EDGE:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
table {
    overflow: hidden !important; 
    height: auto !important; 
    page-break-after: avoid !important; 
    page-break-before: avoid !important; 
    page-break-inside: avoid !important;
}       
table:last-child {
    page-break-after: auto !important; 
}

Merci d'avance pour votre aide.

[NoSmoking]

Bonjour,

Je voudrais que le tableau ne s'affiche sur la page uniquement si son contenu (body) peut pas être affiché partiellement ou totalement afin d'éviter de me retrouver dans cette situation où juste une entête apparaît.

imprimer correctement une <table> n'est pas une chose forcément simple, sauf peut-être à la reconstruire entièrement, et surtout lors qu'elle est comprise dans du texte.

Ceci étant as-tu essayé le minimum à savoir

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
table {
  page-break-before: always;
}

... de plus je pense, de tête, qu'il est compatible tous navigateurs.

[coeurdange]

J'ai résolu le problème en utilisant cet article:
https://medium.com/@Idan_Co/the-ulti...r-568f415f6d2a

Notemmant avec:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
table {
  page-break-before: always;
}