web-dev-qa-db-fra.com

Application de "saut de page avant" à une ligne de tableau (tr)

Selon W3.org, le style page-break-after s'applique aux éléments de niveau bloc ( http://www.w3.org/TR/2004/CR-CSS21-20040225/page.html#page-break-props )

<tr> est un élément de niveau bloc (selon ceci: http://www.htmlhelp.com/reference/html40/block.html , il l'est)

Je fais cela, mais le saut de page ne crée pas un saut de page réel lors de l'impression:

  <table>
    <tr><td>blah</td></tr>
    <tr><td>blah</td></tr>
    <tr style="page-break-after: always"><td>blah</td></tr>
    <tr><td>blah</td></tr>
  </table>

Est-ce que je fais cela correctement?

Si <tr> n'était pas un élément de niveau bloc: comment suis-je supposé réaliser ce saut de page?

Remarque: le code avant n'est qu'un exemple, mais ce que j'essaie de faire est de mettre un saut de page toutes les 5 lignes du tableau, donc si vous connaissez des conseils pour ce cas, ce sera apprécié

csspage-break
12
sports

À l'intérieur <head>, définissez ce style

<head>
    <style>
        @media print {
            tr.page-break  { display: block; page-break-before: always; }
        }   
    </style>
</head>

De cette façon, il produira un saut de page lors de l'impression juste avant cette ligne de tableau.

<tr class="page-break">
</tr>
12
guest

Le site que vous avez référencé indique que <tr> " peut également être considéré comme un élément de niveau bloc car il peut contenir éléments de niveau bloc. " Ni W3.org ni documentation Mozilla n'indiquent que <tr> est un élément de niveau bloc.

Quelques solutions possibles

  1. Sur la base du libellé et de votre exemple, je m'assurerais que la cellule contient un véritable élément de niveau bloc. Voici deux exemples utilisant <h1> et <p> qui sont des éléments de texte au niveau du bloc.

    <tr style="page-break-after: always"><td><h1>Next Section</h1></td></tr>
<tr style="page-break-after: always"><td><p>This will be a new page.</p></td></tr>

  2. D'autres ont signalé des problèmes similaires et l'une des solutions pourrait vous convenir.

  3. Comme mentionné par My Lister , vous pouvez tenter d'attraper l'action d'impression ou générer une version imprimée de la page qui séparerait le tableau afin que vous puissiez obtenir le saut de page souhaité tous les cinq rangs.

2
JSuar