Обходной путь для заголовка таблицы заголовков Chrome 53 дважды на 2-й и более поздних страницах?

Пользователи моего веб-сайта должны иметь возможность печатать веб-страницы, состоящие из содержимого на первой печатной странице, а затем таблицы на второй странице. Урезанная версия (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;
}

Отпечаток, как и ожидалось, в Chrome 52 на Chrome OS, но в Chrome 53 в Windows 7 Home и Chrome 53 в Chrome OS заголовок таблицы дважды печатается на второй странице: один раз сам без верхнего поля и один раз с верхний край, за которым следует остальная часть таблицы. Он обычно печатался в Windows в более ранней версии Chrome, но я не знаю, был ли это Chrome 52 (определенно в последних версиях). Он также печатает как ожидалось в Firefox.

Я нашел одно обходное решение, которое заключается в том, чтобы поместить пустой элемент "thead" перед реальным элементом thead, но это решение очень неприятно и делает меня неудобным.

Существует ли более надежное обходное решение, которое, вероятно, не будет иметь побочных эффектов в браузерах?

Ответ 1

Мое временное решение:

thead {
    display: table-row-group;
}

Ответ 2

Я опубликовал ту же проблему с каналами обратной связи Chrome. Моим обходным решением на данный момент было просто удалить мои элементы thead для стандартной строки таблицы внутри тела. Это, конечно, не так семантически чисто, но вы можете просто просто переделать их с помощью css.

Таблица:

<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

Я получаю двойной заголовок на второй странице в Chrome при печати

Добавление следующего CSS заставило его появиться правильно (один раз)

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

Источник: https://stackoverflow.com/a/50987624/175071

Ответ 4

Это исправление сработало для меня

thead {
  display: table-row-group;    
}