Why is break-after: page; ignored inside CSS columns?

Question

Let's say I have this code:

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

with this 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
    }
}

When printing now, the table doesn't get a page break after it, the next elements are printed on the same page. If I however disable the column-* properties for .chapter, the table gets its own page on printing.

In the real example, I have 10 subchapters and only this one should have a page break afterwards when printing and span both columns. How can I achieve this?

Browser used is Chrome 66.

Answer 1

In your @media print CSS rule, you wrote break-after-page { ... }

But break-after-page is a class (for your table), so in CSS you need to write it with a leading dot, like .break-after-page { ... }