bootstrap - граница сверху добавляет границу к таблице

Question

Я создал таблицу, как показано ниже:

Как видите, верхняя часть границы не принимает никаких изменений, хотя я добавила ее в следующий код:

 <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>

Стиль:

.table-outer-border  {
    border-left:  black solid;
    border-right: black solid;
    border-top: black solid ;
    border-bottom: black solid;
    border-width: thin;
}

Почему это не работает, а также есть способ удалить строки между строками?

Answer 1

Есть несколько изменений, которые вам нужно сделать в своем коде, я только что сделал это для вас, пожалуйста, подтвердите и дайте мне знать.

#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>