I have a table that I have set heights for each row and a min height set for the whole table. The rows automatically stretch vertically to fill the whole table. How do I set the rows to not fill the entire table vertically. I want each row to be 40 pixels high. If there is only one row, there should be space underneath the row since the table is 200 pixels high. How do I prevent the rows from automatically filling the table vertically? I want the white space after the first row if there aren't any other rows
<style>
.messages {
display:flex;
}
</style><div class="messages">
<div class="card w-75"">
<h5 class="card-header py-3">Messages</h5>
<div class="card-body" style="padding:0;">
<table style="width:100%; min-height:200px; border: 1px solid; text-align: center; display:inline-table;">
<tbody>
<tr style="background-color:darkviolet; height:40px;">
<th style="color:white; border: 1px solid;">Date</th>
<th style="color:white; border: 1px solid;">Subject</th>
<th style="color:white; border: 1px solid;">From</th>
</tr>
<tr style="border: 1px solid; height:40px;">
<td style="border: 1px solid;">12/5/19</td>
<td style="border: 1px solid;">Test</td>
<td style="border: 1px solid;">John Doe</td>
</tr>
<tr style="border: 1px solid; height:40px;">
<td style="border: 1px solid;">12/5/19</td>
<td style="border: 1px solid;">Test</td>
<td style="border: 1px solid;">Jane Doe</td>
</tr>
</tbody>
</table>
</div>
</div>
<button class="btn btn-primary" value="Test" style="height:40px; margin-left:20px; margin-top:60px;">Send A Message</button>
</div>