<!DOCTYPE html>
<style>
table { border-spacing: 0; }
thead, tfoot { break-inside: avoid; }
td { height: 18px; padding: 0; font-size: 14px; }
</style>
<div style="columns: 2; width: 300px; height: 200px; column-fill: auto">
  <div style="height: 100px; background: grey"></div>
  <div style="columns: 2; column-fill: auto; height: 300px">
    <table>
      <thead><td>HEAD</td></thead>
      <tr><td>1</td></tr>
      <tr><td>2</td></tr>
      <tr><td>3</td></tr>
      <tr><td>4</td></tr>
      <tr><td>5</td></tr>
      <tr><td>6</td></tr>
      <tr><td>7</td></tr>
      <tr><td>8</td></tr>
      <tr><td>9</td></tr>
      <tr><td>10</td></tr>
      <tr><td>11</td></tr>
      <tr><td>12</td></tr>
      <tr><td>13</td></tr>
      <tr><td>14</td></tr>
      <tr><td>15</td></tr>
      <tr><td>16</td></tr>
      <tr><td>17</td></tr>
      <tr><td>18</td></tr>
      <tfoot><td>FOOT</td></tfoot>
    </table>
  </div>
</div>