only border row and outside table bootstrap - html

Question

I need to remove the border vertical of the table except outside as shown below with bootstrap
I tried
<table class="table no-footer worker-data table-bordered"....
.table td, .table th {
border: none;
}
But result

Answer 1

Go with the below approach.
Clear the right border for first child of row.
Clear the left border for last child.
Clear right and left border for all other other child ec=xcept the first and last child of row.
Working Example
.table td:first-child, .table th:first-child {
border-right: none;
}
.table td:last-child, .table th:last-child {
border-left: none;
}
.table td:not(:first-child):not(:last-child),
.table th:not(:first-child):not(:last-child) {
border-right: none;
border-left: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<table class="table no-footer worker-data table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>