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