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 >   
    <table style="border-collapse: collapse;" >
        <thead>
        <tr>
        <!-- <div > -->
            <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 %}" >Effacer</a></td>
        <td><a href="{% url 'get-commandes' client.id %}" >Afficher les commandes</a></td>
        </tr>
        {% endfor %}
    </table>
<!-- </div>
</div> -->
</div>

Here's a picture of the table

CodePudding user response：

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.