Comment appliquer un saut de page CSS pour imprimer un tableau avec beaucoup de lignes ?

Question

J'ai un tableau dynamique dans ma page Web qui contient parfois beaucoup de lignes. Je sais qu'il existe des propriétés CSS page-break-before et page-break-after Où les mettre dans mon code pour forcer les sauts de page si besoin ?

Answer 1

Vous pouvez utiliser les éléments suivants :

 <style type="text/css">
   table { page-break-inside:auto }
   tr    { page-break-inside:avoid; page-break-after:auto }
</style>

Reportez-vous à la spécification CSS Print Profile du W3C pour plus de détails.

Et référez-vous également aux forums de développeurs Salesforce .

Answer 2

Partout où vous souhaitez appliquer une pause, que ce soit un table ou tr , vous devez donner une classe par ex. page-break avec CSS comme mentionné ci-dessous :

 /* class works for table row */
table tr.page-break{
  page-break-after:always
} 

<tr class="page-break">

/* class works for table */
table.page-break{
  page-break-after:always
}

<table class="page-break">

et cela fonctionnera comme vous l'avez demandé

Alternativement, vous pouvez également avoir une div pour le même :

CSS :

 @media all {
 .page-break  { display: none; }
}

@media print {
 .page-break  { display: block; page-break-before: always; }
}

Div :

 <div class="page-break"></div>

Answer 3

J'ai cherché un correctif pour cela. J'ai un site mobile jquery qui a une page d'impression finale et qui combine des dizaines de pages. J'ai essayé tous les correctifs ci-dessus, mais la seule chose que j'ai pu faire est celle-ci :

 <div style="clear:both!important;"/></div>
<div style="page-break-after:always"></div> 
<div style="clear:both!important;"/> </div>

Answer 4

Malheureusement, les exemples ci-dessus n'ont pas fonctionné pour moi dans Chrome.

J'ai proposé la solution ci-dessous où vous pouvez spécifier la hauteur maximale en PX de chaque page. Cela divisera ensuite le tableau en tableaux séparés lorsque les lignes égaleront cette hauteur.

 $(document).ready(function(){

    var MaxHeight = 200;
    var RunningHeight = 0;
    var PageNo = 1;

    $('table.splitForPrint>tbody>tr').each(function () {

        if (RunningHeight + $(this).height() > MaxHeight) {
            RunningHeight = 0;
            PageNo += 1;
        }

        RunningHeight += $(this).height();

        $(this).attr("data-page-no", PageNo);

    });

    for(i = 1; i <= PageNo; i++){

        $('table.splitForPrint').parent().append("<div class='tablePage'><hr /><table id='Table" + i + "'><tbody></tbody></table><hr /></div>");

        var rows = $('table tr[data-page-no="' + i + '"]');

        $('#Table' + i).find("tbody").append(rows);
    }
    $('table.splitForPrint').remove();

});

Vous aurez également besoin de ce qui suit dans votre feuille de style

     div.tablePage {
        page-break-inside:avoid; page-break-after:always;            
    }

Answer 5

Cela fonctionne pour moi:

 <td>
  <div class="avoid">
    Cell content.
  </div>
</td>
...
<style type="text/css">
  .avoid {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* to keep the page break from cutting too close to the text in the div */
  }
</style>

De ce fil: éviter les sauts de page à l'intérieur de la ligne du tableau