HTML table rules till the size of border

You’ll want to make the last row expand the height of the table with empty space. In this way the rules will continue to the bottom.

Place an empty, tall div in one of your columns of the last row. 1 pixels wide is fine, but any width (including 0) less than the width of your actual content in that column is ideal. Otherwise the column will get wider.

Set the height to an arbitrarily large value. This only works because your parent div has overflow hidden. If you didnt have that there then you would need to use javascript to dynamically calculate the needed height of the row stretching div.

Also set vertical-align to top so that your last row of content (and other rows as well when they wrap) don’t look centered in the middle of the row.

div {
  border: 2px solid red;
  height: 50vh;
  width: 50vw;
  overflow:hidden;
}

tr {                             /* <--- Addition here  */
    vertical-align:top;
}

.empty-space {                   /* <--- Addition here  */
    width:1px;
    height:99999px;  /* arbitrary large height, adjust as needed or set to very high and forget it */
}

table {
  border: 1px solid;
  table-layout: fixed;
  
}

<div>
  <table rules="cols">
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
      <th>Phone No</th>
    </tr>


    <tr>
      <td>Antony</td>
      <td>20</td>
      <td>USA</td>
      <td>12345</td>
    </tr>
    <tr>
      <td>Das</td>
      <td>20</td>
      <td>UK</td>
      <td>12345</td>
    </tr>

    <tr style="">
      <td>Michel<div class="empty-space"></div></td>
      <td>20</td>
      <td>USA</td>
      <td>12345</td>
    </tr>

  </table>
</div>

This solution is just to give you some ideas. You may in the end want to refactor your code a bit. Future problem: where you have styling on div affects all divs, not just the div wrapping the table. This is why the empty-space filling div ends up with a red border too, although in the current demo thats desirable so we can see it.

As opposed to having css that affects all divs and all tables for that matter, in your style block, use a dot in front of an arbitrary classname and then use class on the element referencing that classname. For example:

.table-wrap-div { /* this is a class because of the leading dot */
  border: 2px solid red;
  height: 50vh;
  width: 50vw;
  overflow:hidden;
}

<div class="table-wrap-div">
   <table rules="cols">
   ...
   </table>
</div>

In this way you have more control over your code and styling because it targets only the divs that reference the classname.