web-dev-qa-db-fra.com

Solution de contournement pour l’impression Chrome en-tête de table 53 à deux reprises sur les pages 2 et suivantes?

Les utilisateurs de mon site Web doivent pouvoir imprimer des pages Web comprenant du contenu sur la première page imprimée, suivi d'un tableau sur la deuxième page. Une version allégée est (jsFiddle sur https://jsfiddle.net/jaydeedub/n3qhvtvx/25/ ):

HTML:

<body>
  <button class="button" onclick="window.print()">Print Me</button>
  <div class="page1">
    This is the page 1 content. Blah, blah, blah.
  </div>
  <table class="table">
    <thead>
      <tr>
        <td>Page 2 table header prints twice</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Page 2 table body</td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>Page 2 table footer</td>
      </tr>
    </tfoot>
  </table>
</body>

CSS:

@media print {
  div.page1 {
    page-break-after: always;
  }
}

.table {
  border-collapse: collapse;
  margin: 16px;
}

.table>thead>tr>td,
.table>tbody>tr>td,
.table>tfoot>tr>td {
  border: 1px solid black;
}

.button {
  width: 6em;
  height: 2em;
  margin: 10px 0px;
}

Cela s’imprime comme prévu dans Chrome 52 sous Chrome OS, mais dans Chrome 53 sous Windows 7 Home et Chrome 53 sous Chrome OS, l’en-tête du tableau est imprimé deux fois sur la deuxième page: une seule sans la marge supérieure et une autre avec la marge supérieure. , suivi du reste de la table. Auparavant, il imprimait normalement sous Windows dans une version antérieure de Chrome, mais je ne sais pas s'il s'agissait de Chrome 52 (certainement dans les dernières versions). Il imprime également comme prévu dans Firefox.

J'ai trouvé une solution de contournement, qui consiste à mettre un élément 'thead' vide avant le véritable élément 'thead', mais cette solution est très compliquée et me met mal à l'aise.

Existe-t-il une solution de contournement plus robuste qui n'aurait probablement pas d'effets secondaires sur les navigateurs?

google-chromeprintinghtml-table
15
jaydeedub

Ma solution temporaire:

thead {
    display: table-row-group;
}
29
liewzy

J'ai posté le même problème sur les canaux de commentaires de Chrome. Ma solution pour l'instant consistait simplement à supprimer mes éléments thead d'une rangée de tableau standard dans le tbody. Ce n’est certainement pas aussi sémantiquement pur, mais vous pouvez simplement les relooker avec une touche de CSS.

Table: 

<table>
<tbody>
  <tr class="thead">
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
  </tr>
</tbody>
<tfoot>
   <tr>
     <td></td>
     <td></td>
   </tr>
</tfoot>
</table>

Scss:

tr.thead {
  td {
    font-weight:bold;
    border-bottom: solid 1px #333;
  }    
}
2
jkelley

Je recevais le double en-tête sur la deuxième page en chrome lors de l'impression

L'ajout du CSS suivant l'a fait apparaître correctement (une fois)

thead {
    display:table-header-group;
    break-inside: auto;
}

Source: https://stackoverflow.com/a/50987624/175071

0
Timo Huovinen