Принудительно указывать название таблицы и ее первый ряд на одной странице при печати

Question

Можно ли заставить таблицу и ее первый ряд содержимого находиться на одной странице при ее печати? Эта проблема возникает, когда перед таблицей находится некоторое другое содержимое. Таблица выглядит примерно так:

<table>
   <caption>
      Title of the table
   </caption>
   <tbody>
     <tr>first row</tr>
     <tr>second row</tr>
     <---more rows--->
   </tbody>
</table>

Кто-нибудь знает, как заставить таблицу и ее первую строку (или первые несколько строк) содержимого находиться на одной странице при печати? Я попытался замаскировать заголовок и первые несколько строк с помощью div (с высотой, скажем, 200px, а также page-break-inside: avoid используется), это работает, но он вертикально расширяет родительский контейнер на 200 пикселей (только одна таблица нуждается в маскировании, когда я тестировал фиктивную веб-страницу) и вводит пустую страницу.

Jsfiddle для случаев, когда маскирование не применяется: https://jsfiddle.net/8pk5L3jz/29/

Это ссылка на jsfiddle, которая описывает мою проблему, добавила div.mask вызывает расширение контейнера таблицы на 200 пикселей, что может привести к пустой странице (это было в моем фиктивном примере): https://jsfiddle.net/8pk5L3jz/26/

Answer 1

Это должно работать:

table caption:first-child{
    page-break-after: avoid;  
}
table tr:first-child{
    page-break-after: avoid;
    page-break-before: avoid;
}
/* for n child */
table tr:nth-child(2),
table tr:nth-child(3){
   page-break-before: avoid;
}

проверено с оперой

записка от доктора MDN

Примечание: это свойство находится в процессе замены на более общий прорыв. Это новое свойство также обрабатывает разрывы столбцов и областей и синтаксически совместимо с разрывами страниц.