Border at the bottom of the table not displaying properly during page break

Question

I need to create a table that only has border on left and right of each cells. Also, there should be a border-bottom only on the last table-row. In the image below the border bottom is somewhat detached from the table during page break. In some cases the bottom border was not even visible.

I tried setting border-bottom of table-body but it only applied to the end of the table.

I used :last-child but only applied to last page containing the table and not for every page.

<table class="table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody class="table-body>
    <!-- tr repeated until pagebreak occurs -->
    <tr>
      <td class="table-data">Some Value 1</td>
      <td class="table-data">Some Value 2</td>
      <td class="table-data">Some Value 3</td>
    </tr>
  </tbody>
</table>

.table {
  border;
  width: 100%;
}

.table-data {
  max-width: 100px;
  word-break: break-all;
  font-size: 12px;
  padding: 0;
  border-left: 1px solid black;
  border-right: 1px solid black;
  vertical-align: top;
}

.table-body {
  border-bottom: 1px solid black;
}

table, tr, td, th, tbody, thead, tfoot {
  page-break-inside: avoid !important;
}