JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="table-responsive">
   <table class="table">
     <thead>
      <tr>
        <th scope="col">&nbsp;</th>
        <th scope="col">Product</th>
        <th scope="col">Quantity</th>
        <th scope="col">Price</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <th scope="row">#</th>
            <td>100 % Mango</td>
            <td>1 X</td>
            <td>12.99 €</td>
        </tr>
        <tr>
            <th scope="row">#</th>
            <td>Vanilla</td>
            <td>2 x</td>
            <td>10.98 €</td>
        </tr>
        </tbody>
 </table>
 </div>

SCSS

.table {
  border-right     : 1px solid #000000;
  background-color : transparent;
  color            : #000000;
  text-align : center;
  thead {
    font-family : 'Alegreya', serif;
    border      : none;
    th {
      border     : none;
    }
  }
  tbody {
    font-weight    : 700;
    text-transform : uppercase;
    border         : none;
    font-size      : 1.5rem;
    th, td {
      border : none;
/*       &:nth-child(3) {
        border-right     : 2px solid #000000;
        border-left     : 2px solid #000000;
      } */

    }
    td{
     position:relative;
  padding-right:10px;
  }
   td:nth-child(2):after, td:nth-child(3):after{
    content: '';
    height: 21px;
    width: 2px;
    background-color: black;
    position: absolute;
    top: 35%;
    left: 90%;
  
}
  
   td:nth-child(4):after{
    content: '';
    height: 100%;
    width: 2px;
    background-color: black;
    position: absolute;
    left: 90%;
  
}
  }
}