Try this

.table thead th {
    vertical-align: bottom;
     
}.table thead th span{float:right;color:#000;}

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <table class="table">
  <thead>
    <tr >
      <th scope="col">#<span> | </span></th>
      <th scope="col">First<span> | </span></th>
      <th scope="col">Last<span> | </span></th>
      <th scope="col">Handle<span> | </span></th>
    </tr>
  </thead>
  <tbody>
    <tr >
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
 

I’m trying to insert a short right border between the <th> of a bootstrap table however I can’t get the required result. Can anyone help me?

My code:

<div class="table-responsive">
    <table class="table">
        <thead>
            <tr>
                <th scope="col">#</th>
                <th scope="col">First</th>
                <th scope="col">Last</th>
                <th scope="col">Handle</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Mark</td>
                <td>Otto</td>
                <td>@mdo</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>Jacob</td>
                <td>Thornton</td>
                <td>@fat</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>Larry</td>
                <td>the Bird</td>
                <td>@twitter</td>
            </tr>
        </tbody>
    </table>
</div>

Css:

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    border-right: 2px solid black;
}

Result

Desired result