title: Stop HTML table "shunting" (page-break?) into next page when converted to PDF
body: <p>I have a HTML page with CSS and I convert it to PDF. My HTML page contains a table which when small renders directly under the header at the top of the page but when the table is big, it is shunted (i.e. page break) down and starts at the 2nd page. It spills over into the 3rd page correctly - but how do i stop this page break on page 1? I've tried adding <code>page-break-inside</code>, <code>page-break-before</code> and <code>page-break-after</code> to the @page and table styles but it doesn't work.</p>
  
  <p>I.e. this is happening:
  <img src="https://i.stack.imgur.com/PaJzq.png" alt="enter image description here"></p>
  
  <p>The desired behaviour is as it is when the table is small, i.e.:
  <img src="https://i.stack.imgur.com/T9afl.png" alt="enter image description here"></p>
  
  <p>The code is:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              @page {
                  margin: 0.2cm;
              }
              body {
                  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                  font-size: 12px;
                  line-height: 1.25rem;
              }
              h1 {
                  line-height: 2rem;
              }
              img {
                  display: block;
                  float: right;
                  height: 120px;
                  margin-bottom: 0.25rem;
                  object-fit: cover;
                  width: 192px;
              }
              table {
                  border-collapse: collapse;
                  table-layout: fixed;
                  width: 100%
              }
              table, td, th {
                  border: 0.1rem solid black;
              }
              td {
                  overflow: hidden;
                  overflow-wrap: break-word;
                  padding: 0.2rem;
                  vertical-align: top;
              }
              th {
                  padding: 0.1rem 0.2rem;
                  font-size: 0.75rem;
                  text-decoration: underline;
              }
              tr.compact td {
                  padding: 0.05rem 0.2rem;
                  line-height: 1rem;
              }
              tr.spacer td {
                  background-color: lightgrey;
                  height: 0.2rem;
              }
          &lt;/style&gt;
      &lt;/head&gt;
      &lt;title&gt;Shopping Lists&lt;/title&gt;
      &lt;body&gt;
          &lt;img src="{{ url_for('static', filename='logo.png', _external=True)}}"&gt;
          &lt;h1&gt;CLIENT SHOPPING LIST&lt;/h1&gt;
          {% set postcode = request['postcode'] %}
          &lt;h2&gt;POSTCODE: {{ postcode }}&lt;/h2&gt;
          &lt;b&gt;REFERENCE #:&lt;/b&gt; {{ request['reference_number'] }}
          &lt;table&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;&lt;b&gt;NAME:&lt;/b&gt; {{ request['client_full_name'] }}&lt;/td&gt;
                  &lt;td colspan="2"&gt;&lt;b&gt;CONTACT:&lt;/b&gt; {{ request['phone_number'] or '' }}&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;b&gt;ADDRESS&lt;/b&gt;&lt;br&gt;
                      {{ request['address_line_1'] }}, {{ postcode }}
                  &lt;/td&gt;
                  &lt;td colspan="2"&gt;
                      &lt;b&gt;EXTRA INFORMATION&lt;/b&gt;&lt;br&gt;
                      {{ request['extra_information'] or '' }}
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="2"&gt;
                      &lt;b&gt;HOUSEHOLD SIZE:&lt;/b&gt; {{ request['household_size'] }}&lt;br&gt;
                      &lt;b&gt;GENDER:&lt;/b&gt; {{ request['gender'] }}&lt;br&gt;
                      &lt;b&gt;NUMBER OF ADULTS:&lt;/b&gt; {{ request['number_of_adults'] }}&lt;br&gt;
                      &lt;b&gt;NUMBER OF CHILDREN:&lt;/b&gt; {{ request['number_of_children'] }}&lt;br&gt;
                      &lt;b&gt;AGE OF CHILDREN:&lt;/b&gt; {{ request['age_of_children'] }}
                  &lt;/td&gt;
                  &lt;td colspan="2"&gt;
                      &lt;b&gt;FEMININE PRODUCTS REQUIRED:&lt;/b&gt; {{ request['feminine_products_required'] }}&lt;br&gt;
                      &lt;b&gt;BABY PRODUCTS REQUIRED:&lt;/b&gt; {{ request['baby_products_required'] }}&lt;br&gt;
                      &lt;b&gt;PET FOOD REQUIRED:&lt;/b&gt; {{ request['pet_food_required'] }}&lt;br&gt;
                      &lt;b&gt;DIETARY REQUIREMENTS:&lt;/b&gt; {{ request['dietary_requirements'] }}
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr class="spacer"&gt;&lt;td colspan="4"&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;
                  &lt;th&gt;Item Description&lt;/th&gt;
                  &lt;th&gt;Quantity&lt;/th&gt;
                  &lt;th&gt;Notes&lt;/th&gt;
                  &lt;th&gt;Completed?&lt;/th&gt;
              &lt;/tr&gt;
              {% for item in list["items"] %}
                  {% set quantity = item['quantity'] %}
                  {% if quantity != "0" %}
              &lt;tr class="compact"&gt;
                  &lt;td&gt;{{ item['item_description'] }}&lt;/td&gt;
                  &lt;td&gt;{{ quantity }}&lt;/td&gt;
                  &lt;td&gt;{{ item['notes'] or '' }}&lt;/td&gt;
                  &lt;td&gt;&lt;/td&gt;
              &lt;/tr&gt;
                  {% endif %}
              {% endfor %}
              &lt;tr class="spacer"&gt;&lt;td colspan="4"&gt;&lt;/td&gt;&lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td colspan="4"&gt;
                      &lt;b&gt;Warehouse Manager Notes&lt;/b&gt;&lt;br&gt;
                      {{ list['notes'] }}
                  &lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;b&gt;Date Packed&lt;/b&gt;&lt;br&gt;
                  &lt;/td&gt;
                  &lt;td colspan="3"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;b&gt;Packer Name&lt;/b&gt;&lt;br&gt;
                  &lt;/td&gt;
                  &lt;td colspan="3"&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;
                      &lt;b&gt;Packer Signature&lt;/b&gt;
                  &lt;/td&gt;
                  &lt;td colspan="3"&gt;&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
      &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>