Как я могу удалить границу из этой таблицы

Дело в том, что я хочу добавить два элемента якоря для каждой строки таблицы, поэтому мне нужно добавить еще два для этих ссылок, и проблема в том, что когда я добавляю их, в верхней части таблицы появляется рамка, даже когда я устанавливаю

<th style="display:none;"></th>

вот код таблицы

.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>

Вот фотография стола

Ваша таблица имеет класс table-bordered, вы можете попробовать избавиться от этого. Вы также можете управлять видом границы непосредственно из атрибута style: например, если вы замените display:none; на border: 0px;, она должна исчезнуть. Вы также можете сделать ее прозрачной (border-color: transparent;) и т.д.

Вернуться на верх