bootstrap- border top is adding a border to table - html

Question

I created a table just like below:
As you can see the border top is not taking any changes although I did add it in the following code:
<div class="col-6 col-md-3 col-sm-6 font-style" style="font-size:10px;">
<table class="table table-outer-border font-style " >
<tbody class="font-style">
<tr >
<td>Receiver:</td>
</tr>
<tr>
<td>Attention To:</td>
</tr>
<tr>
<td>Contact No:</td>
</tr>
</tbody>
</table>
</div>
<div class="col-6 col-md-3 col-sm-6 font-style" style="font-size:10px;">
<table class="table table-outer-border font-style " >
<tbody class="font-style">
<tr >
<td>Deliver To:</td>
</tr>
<tr>
<td>Attention To:</td>
</tr>
<tr>
<td>Contact No:</td>
</tr>
</tbody>
</table>
</div>
Style:
.table-outer-border {
border-left: black solid;
border-right: black solid;
border-top: black solid ;
border-bottom: black solid;
border-width: thin;
}
Why is it not working and also is there a way to remove the lines between the rows?

Answer 1

There are couple of changes you need to do in your code, I have just made that for you, Kindly validate and let me know.
#MainDiv {
height: 100px;
width: 500px;
margin: 5px;
display: flex;
flex-direction: row;
font-size: 20px;
}
td {
width: 150px;
}
#firstDiv {
border: 1px solid black;
}
#secondDiv {
margin-left: 20px;
border: 1px solid black;
}
<div id="MainDiv">
<div id="firstDiv" class="col-6 col-md-3 col-sm-6 font-style">
<table class="table table-outer-border font-style ">
<tbody>
<tr>
<td>Receiver:</td>
<td></td>
</tr>
<tr>
<td>Attention To:</td>
<td></td>
</tr>
<tr>
<td>Contact No:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
<div id="secondDiv" class="col-6 col-md-3 col-sm-6 font-style">
<table class="table table-outer-border font-style ">
<tbody class="font-style">
<tr>
<td>Deliver To:</td>
<td></td>
</tr>
<tr>
<td>Attention To:</td>
<td></td>
</tr>
<tr>
<td>Contact No:</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>