Решение для коллектора хром 53 печатного стола в два раза на 2й и последующих страницах?


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

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

3 15

3 ответа:

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

thead {
    display: table-row-group;
}

Я опубликовал тот же вопрос в каналах обратной связи 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;
  }    
}

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

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

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

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