How can I remove the border from this table - html

Question

The thing is I want to add two anchor elements for every table row so I needed to add two more for those links,
and the problem is that when I add them a border appears at the top of thead even when I set
<th style="display:none;"></th>
here's the table code
.tablesgh table{
width: 80%;
margin:auto;
/* align-self: center; */
}
<div class="tablesgh">
<table style="border-collapse: collapse;" class="table text-center table-responsive table-success table-hover table-bordered table-sm">
<thead>
<tr>
<!-- <div class="boldTd"> -->
<th>Nom complet</th>
<th>Num telephone</th>
<th>Lien du profile</th>
<th>Date ajouté</th>
<th style="display:none;"></th>
<th style="display:none;"></th>
<!-- </div> -->
</tr>
</thead>
{% for client in clients %}
<!-- <script>
var cli_name="{{client.name}}";
var cli_id="{{client.id}}";
</script> -->
<tr>
<td>{{client.name}}</td>
<td>{{client.phone}}</td>
<td>{{client.profile_link}}</td>
<td>{{client.date_added}}</td>
<td style="display:none;">{{client.id}}</td>
<td><a style="position:relative;" href="{% url 'delete-record' client.id %}" class="btn btn-outline-danger">Effacer</a></td>
<td>Afficher les commandes</td>
</tr>
{% endfor %}
</table>
<!-- </div>
</div> -->
</div>
Here's a picture of the table

Answer 1

Your table is of class table-bordered, you can try getting rid of that.
You can also control the border appearance directly from the style attribute: for instance, if you replace display:none; with border: 0px;, it should disappear. You can also make it transparent (border-color: transparent;), etc.