Почему перерыв: страница;игнорируется внутри столбцов 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 { ... }