How to make table 100% height in HTML?

Question

I have 5 tables in a row, all have 100% height which works correctly in the browser, the elements are stretched to fill all the available space but they wont stretch in print view.

I want the table to extend beyond the page break and have the header. I tried using a single table with one column (since the cards have different heights and cannot be placed in a single 5 x n table) where the only column contained the cards but it either wouldn't break inside or had very weird behavior, just changing a completely unrelated margin or padding broke the whole layout.

Edit: This is part of a large document so I can't include the whole implementation but here's a minimal example:

<style>
  .flex {
    display: flex;
    gap: 1rem;
    /* add some top margin to simulate content before the table */
    margin-top: 50vh;
  }

  table {
    flex: 1;
  }

  .card {
    padding: 0.5rem;
    border-radius: 0.25rem;
    background: lightblue;
  }
</style>
    
<div class="flex">
  <table>
    <thead>
      <tr>
        <td>
          <div style="background: red">COLUMN1</div>
        </td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <!-- more cards -->
    </tbody>
  </table>
  <!-- more tables [1..5] -->
</div>

In print the tables are only as high as the total height of the cards inside but in the browser the stable is stretched.

Answer 1

This is not possible without assigning height value to div.

try this

body, html{height:100%}
div{height:100%}
table{background:green; width:450px}  

let me know if this was helpful.

Answer 2

I face a case like this few years ago, I end up by estimate the number of rows that can actually fit in a printed page, let's say 10 rows, so you cut every 10 rows and start an new table.

Every new table you add style="page-break-before: always;" and you're done.

This way you avoid many renderer problems, you can add headers on each page OR NOT as you want, and you can also choose if you add all table headers or just the expending one.

Answer 3

You can add empty cells for each table to get the same number of cells as the largest table. Also add a cell height to keep grid structure for each table.

css style

td {
  height: 2rem;
  line-height: 1;
}

.flex {
  display: flex;
  gap: 1rem;
  /* add some top margin to simulate content before the table */
  margin-top: 50vh;
}

table {
  flex: 1;
}

.card {
  padding: 0.5rem;
  border-radius: 0.25rem;
  background: lightblue;
}
/* new style */
td {
  height: 2rem;
  line-height: 1;
}

<div class="flex">
  <table>
    <thead>
      <tr>
        <th>
          <div style="background: red">COLUMN1</div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <!-- more cards -->
    </tbody>
  </table>
  <table>
    <thead>
      <tr>
        <th>
          <div style="background: red">COLUMN2</div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td>
          <div class="card">CARD</div>
        </td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td></td>
      </tr>
      <tr>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>