Comment réaliser un saut de page dans la table HTML pour Google Chrome?
Je suis en train d'imprimer une grande table générée avec jQuery dans une page HTML. Je suis en utilisant google Chrome 26.0.141. Le problème est avec saut de page.
j'ai d'abord utilisé cette css
#membersList table { page-break-inside:auto; position:relative}
#membersList tr { page-break-before:avoid; page-break-after:auto;position:relative}
#membersList td{ border:solid 1px #CCCCCC;width:auto;position:relative}
#membersList thead { display:table-header-group;position:relative }
#membersList tfoot { display:table-footer-group;positioion:relative}
cette force a fonctionné alors j'ai cherché et obtenu ce lien
Google Chrome Impression Des Sauts De Page
basé sur l'une des réponse dans ce lien, je suis en utilisant le CSS suivant attribut
-webkit-region-break-inside: avoid;
Mais quand je le lance et inspecter l'élément, il est caressé par défaut.
Quelle serait la solution? Il y a beaucoup de posts, j'ai cherché. Ils disent que les versions récentes ne supportent pas de saut de page. Si c'est vrai, alors quelle autre solution est là pour réaliser un saut de page dans Google Chrome?
j'ai édité la question.
a ma réponse a aidé?
avez-vous vérifié mon code précédent. j'ai essayé ce que vous avez décrit, mais qui force a fonctionné pour moi. veuillez vérifier mon code et me dire si quelque chose est incorrect avec qui.
Finalement j'ai résolu ce problème. J'ai fait` tr{display:block;}` et puis je fixe l'espacement entre les cellules. saut de page ne fonctionne que sur les éléments de niveau bloc.
OriginalL'auteur sarsarahman | 2013-07-20
Vous devez vous connecter pour publier un commentaire.
Finalement j'ai résolu ce problème. J'ai fait
tr{display:block;}
et puis je fixe l'espacement entre les cellules.
Saut de Page ne fonctionne que sur les éléments de niveau bloc.
OriginalL'auteur sarsarahman
Comme l'a dit MDN:
Si vous avez besoin d'utiliser
page-break-after
avec une certaine valeur qui vous convient le mieux. En voici quelques uns:auto:
Valeur initiale. Automatiquement des sauts de page (ni forcé, ni interdit).
toujours:
Toujours à la force des sauts de page après l'élément.
éviter:
Éviter les sauts de page après l'élément.
gauche:
La Force des sauts de page après l'élément de sorte que la prochaine page est au format d'une page de gauche.
droite:
La Force des sauts de page après l'élément de sorte que la prochaine page est au format d'une page de droite.
Vous pouvez également utiliser le
break-after
propriété:Finalement j'ai résolu ce problème. J'ai fait` tr{display:block;} ` et puis je fixe l'espacement entre les cellules. saut de page ne fonctionne que sur les éléments de niveau bloc.
OriginalL'auteur Mohammad Areeb Siddiqui
Vous pourriez avoir besoin de diviser le tableau en plusieurs parties, et de définir leurs
page-break-after
propriété css pouralways
. Cela fonctionne (avec la version bêta de Chrome), je ne sais pas si il y a un moyen de le faire dans une table en continu.je ne suis pas sûr au sujet du contenu des lignes, car peu de ligne peut contenir plus de données que d'autres. toutes les lignes ne sont pas de même taille c'est le problème.
Vous pouvez toujours obtenir de meilleurs résultats en faisant une supposition.
Finalement j'ai résolu ce problème. Je madetr{display:block;} puis je fixe l'espacement entre les cellules. saut de page ne fonctionne que sur les éléments de niveau bloc.
Comment avez-vous régler l'espacement entre les cellules?
OriginalL'auteur sabof
J'ai fourni quelques plaques de qt pour améliorer table des sauts de page. Vous pouvez consulter question 168 http://code.google.com/p/wkhtmltopdf/issues/detail?id=168#c13
Finalement j'ai résolu ce problème. J'ai fait ` tr{display:block;} ` et puis je fixe l'espacement entre les cellules. saut de page ne fonctionne que sur les éléments de niveau bloc.
OriginalL'auteur Christopher Hart
J'ai utilisé quelque chose comme plusieurs tables, pour faire de cette chose que @sabof mentionné. Dire que je voulais 11 lignes à venir sur la page.
Balises HTML;
J'ai créé des lignes de manière dynamique afin de le JQuery, la logique est la suivante;
CSS ont été quelque chose comme cela;
OriginalL'auteur Mahib