Почему перерыв: страница; игнорируется внутри столбцов CSS?

Question

Допустим, у меня есть этот код:

<div class="chapter">
  <div class="subchapter column-span-all">
    <table class="break-after-page">
      ...
    </table>
  </div>
  <div class="subchapter">
    ...
  </div>
</div>

с этим CSS:

.chapter {
    column-count: 2;
    column-gap: 4em;
}
.subchapter.column-span-all {
    column-span: all;
}
.subchapter {
    break-inside: avoid-column;
    -webkit-column-break-inside: avoid;
}
@media print { 
    break-after-page {
        break-after: page
    }
}

При печати сейчас таблица не получает разрыв страницы после нее, следующие элементы печатаются на той же странице. Однако если я отключу column-* свойства для .chapter, таблица получает свою собственную страницу при печати.

В реальном примере у меня есть 10 подразделов, и только у этого должен быть разрыв страницы при печати и охватывать оба столбца. Как мне этого добиться?

Используется браузер Chrome 66.

Answer 1

В вашем @media print Правило CSS, вы написали break-after-page { ... }

Но break-after-page это класс (для вашего table), поэтому в CSS вам нужно написать это с начальной точкой, как .break-after-page { ... }