web-dev-qa-db-fra.com

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

J'ai une table 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ù est-ce que je les mets dans mon code afin de forcer le saut de page si nécessaire?

htmlcssprintingcss-tablespage-break
61
Mohammad Saberi

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.

Reportez-vous également au Forums de développement Salesforce .

102
Hemant Metalia

Partout où vous voulez appliquer un saut, soit table ou tr, vous devez donner une classe par exemple. 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 selon vos besoins

Alternativement, vous pouvez aussi avoir la structure div pour la même chose:

CSS:

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

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

Div:

<div class="page-break"></div>
18
Aditya P Bhatt

J'ai regardé autour pour une solution pour cela. J'ai un site mobile JQuery qui a une page d'impression finale et combine des dizaines de pages. J'ai essayé tous les correctifs ci-dessus, mais la seule chose que je pourrais faire pour travailler est la suivante:

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

Malheureusement, les exemples ci-dessus ne m'ont pas fonctionné sous Chrome.

Je suis venu avec la solution ci-dessous où vous pouvez spécifier la hauteur maximale en PX de chaque page. Cela divisera ensuite la table en tables séparées lorsque les lignes auront la même 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;            
    }
8
Jay1b

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 le saut de page dans la rangée du tableau

0
Alan

Si vous savez combien vous voulez sur une page, vous pouvez toujours le faire. Il commencera une nouvelle page après chaque 20ème élément.

.row-item:nth-child(20n) {
    page-break-after: always;
    page-break-inside: avoid;
}
0
quemeful