Дополнительные границы и неправильное отображение при использовании class="d-none d-sm-block d-md-block" bootstrap

Мне нужно скрыть некоторые столбцы моей таблицы на мобильных устройствах. Я использую d-none d-sm-block d-md-block для этого на малых и средних размерах экрана.

Вот мой код:

    <table border="1px" class="table table-hover">
    <thead class="thead-dark">
    <tr>
      <th class="d-none d-sm-block d-md-block">Fund</th>
      <th>Why them</th>
      <th>How to donate</th>
    </tr>
    </thead>
    {% for fund in funds_list %}
        <tr>
          <td class="d-none d-sm-block d-md-block"> <a href={{ fund.url }} target="_blank" rel="noopener noreferrer">{{ fund.name }}</a></td>
          <td> {{ fund.description|safe }}</td>
          <td> <a href={{ fund.bank_details }} target="_blank" rel="noopener noreferrer" class="btn btn-primary stretched-link">Go to website</td>
        </tr>
    {% endfor %}
</table>

Когда я не добавляю эти классы, моя таблица выглядит нормально:

Однако после того, как я добавляю это class="d-none d-sm-block d-md-block", вокруг столбца, который я хочу скрыть, появляется какая-то странная граница:

{% for fund in funds_list %}
        <tr>
          <td class="d-none d-sm-block d-md-block border-0"> <a href={{ fund.url }} target="_blank" rel="noopener noreferrer">{{ fund.name }}</a></td>
          <td> {{ fund.description|safe }}</td>
          <td> <a href={{ fund.bank_details }} target="_blank" rel="noopener noreferrer" class="btn btn-primary stretched-link">Go to website</td>
        </tr>
{% endfor %}

class="d-none d-sm-table-cell..