How can I remove the border from this table

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><a href="{% url 'get-commandes' client.id %}" class="btn btn-outline-info">Afficher les commandes</a></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.