Workaround for Chrome 53 printing table header twice on 2nd and later pages?

问题

Users of my website need to be able to print web pages consisting of content on the first printed page followed by a table on the second page. A stripped down version is (jsFiddle at 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;
}

This prints as expected in Chrome 52 on Chrome OS, but in Chrome 53 on Windows 7 Home and Chrome 53 on Chrome OS, the table header prints twice on the second page: once by itself without the top margin, and once with the top margin, followed by the rest of the table. It used to print normally in Windows in an earlier version of Chrome, but I do not know if that was Chrome 52 (definitely within the last few versions). It also prints as expected in Firefox.

I found one workaround, which is to put an empty 'thead' element before the real 'thead' element, but this solution is very kludgy and makes me uncomfortable.

Is there a more robust workaround that would be likely not to have side-effects across browsers?

回答1:

My temporary solution:

thead {
    display: table-row-group;
}

回答2:

I posted the same issue to the Chrome feedback channels. My workaround for now was to simply remove my thead elements for a standard table row within the tbody. It's certainly not as semantically pure, but you can pretty simply restyle them with a touch of 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;
  }    
}

回答3:

I was getting the double header on the second page in chrome when printing

Adding the following CSS made it appear properly (once)

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

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

回答4:

This fix worked for me

thead {
  display: table-row-group;    
}

来源：https://stackoverflow.com/questions/39516885/workaround-for-chrome-53-printing-table-header-twice-on-2nd-and-later-pages

标签

google-chrome

printing

html-table