Comment éviter la pagination dans les lignes du tableau

Question

Je souhaite éviter la pagination dans les lignes du tableau via wkhtmltopdf lors de la conversion HTML en PDF. J'ai utilisé page-break-inside:avoid avec table et cela a fonctionné, mais pas lorsqu'il y a plusieurs lignes. Si l'affichage est défini sur bloc ou sur d'autres méthodes, le format du tableau sera modifié et des bordures doubles seront insérées. Vous pouvez également insérer un en-tête de tableau sur chaque page pour l'afficher lorsque le tableau est divisé.

Answer 1

La meilleure façon que j'ai trouvée de gérer cela dans les navigateurs Webkit est de placer un div à l'intérieur de chaque élément td et d'appliquer le saut de page à l'intérieur : évitez le style du div comme ceci :

...
<td>
  <div class="avoid">
    单元格内容。
  </div>
</td>
...
<style type="text/css">
  .avoid {
    page-break-inside: avoid !important;
    margin: 4px 0 4px 0;  /* 为了避免页面断开太接近div内的文本 */
  }
</style>

Bien que Chrome ne reconnaisse pas l'attribut « page-break-inside : évitez ; », cela semble empêcher le contenu de la ligne d'être divisé en deux par des sauts de page lors de la génération de PDF à l'aide de wktohtml. L'élément tr peut se briser légèrement au-delà de la page, mais pas le div et tout ce qu'il contient.

Answer 2

Vous pouvez essayer d'utiliser CSS :

<table class="print-friendly">
 <!-- 这里是你的表格的其余部分 -->
</table>

<style>
    table.print-friendly tr td, table.print-friendly tr th {
        page-break-inside: avoid;
    }
</style>

La plupart des règles CSS ne peuvent pas être appliquées directement <tr>标签，因为正如你上面指出的那样-它们具有独特的display样式，不允许这些CSS规则。然而，其中的<td>和<th>标签通常允许这种规范-你可以使用上面示例中的CSS轻松地将这些规则应用于所有子<tr>和<td>.