Create a table with empty space at bottom

General
1

I want to create a table with min-height: 90vh, so it don’t get smaller than that particular height but when I do that the columns height gets increased and occupy space as per table height and that’s issue. I don’t want each column height exceed more then 30px.

Also I have footer at bottom which should be at bottom of the table and columns need to align at top. So there should be white space between columns and footer.

Below image represents expected result.

kE7exFlb
kE7exFlb938×844 6.76 KB

And this is what I have tried till now. Also please share why height applied on th & td is not working.

body,
html {
  background-color: white;
  margin: 0;
  padding: 0;
  height: 100%;
}

table {
  width: 80%;
  min-height: 90vh;
  border-collapse: collapse;
  table-layout: fixed;
}

th,
td {
  border: 1px solid black;
  text-align: center;
  height: 30px;
  font-size: 14px;
  line-height: 30px;
}

th {
  background-color: #f2f2f2;
}

.subject-column {
  width: 50%;
}

.marks-column {
  width: 30%;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>

  <div class="mainDiv">
    <table>
      <tbody>
        <tr>
          <th>Sr no</th>
          <th>Date</th>
          <th class="subject-column">Subject</th>
          <th class="marks-column">Marks</th>
        </tr>
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
        <tr>
          <td>1.</td>
          <td>26-8-24</td>
          <td>Maths</td>
          <td>B2 ( 60-70 Percentage )</td>
        </tr>
        <tr>
          <td colspan="3" style="text-align: right; padding-right: 10px;">Total</td>
          <td>B2</td>
        </tr>
      </tbody>
    </table>
  </div>



</body>

</html>

Thank You in advance.