Как убрать границу одного элемента в бутстрапе

Question

Есть корзина, которая построена на таблице bootstrap. Один элемент выходит за ее поля и к нему дорисовывается верхняя граница, она тоньше чем та, что у других элементов. Хочу убрать ее у элемента выходящего дальше всех (объяснил не очень, но приложу фото, сами увидите).

По инспектору видно, что поля задает следующий стиль в бутстрапе:

.table th, .table td {
    padding: 0.75rem;
    vertical-align: top;
    border-top: 1px solid #dee2e6;
}

.table td выделен, а .table th прозрачен, полагаю именно первый срабатывает. А вот собственно и вся таблица корзины:

<table class="table">
            <thead>
              <tr>
                <th scope="col">Название</th>
                <th scope="col">Кол-во</th>
                <th scope="col">Цена</th>
                <th scope="col">Стоимость</th>
              </tr>
            </thead>
            <tbody>
                @foreach($products as $product)
              <tr>
                <th scope="row"><img class="basketimg mr-1" src="/img/products/{{ $product['img'] }}"><span class="basket-prod-name">{{ $product['name'] }}</span></th>
                <td>
                  <div class="btn-group form-inline">
                      <div class="prodcount">{{ $product['qty'] }}</div>
                          <a href="{{ route('basket-red', [ 'id' => $product['id'] ]) }}" class="fas fa-minus-square"></a>
                          <a href="{{ route('basket-inc', [ 'id' => $product['id'] ]) }}" class="fas fa-plus-square"></a>
                  </div>
                </td>
                <td>{{ $product['price'] }} $</td>
                <td>{{ $product['cost'] }} $</td>
<!--**!!!ЗНАЧЁК УДАЛЕНИЯ ЗДЕСЬ!!!**--><td class="trash-btn"><a href="{{ route('basket-del', [ 'id' => $product['id'] ]) }}"><i class="fas fa-trash-alt"></i></a></td> <!--**!!!ЗНАЧЁК УДАЛЕНИЯ ЗДЕСЬ!!!**-->
              </tr>
                @endforeach
              <tr>
                <td colspan="3"><h5>Общая стоимость:</h5></td>
                <td><h5>{{ $totalPrice ?? '0'}} $</h5></td>
            </tr>
            </tbody>
          </table>

Там скорее всего как то через дочерние элементы обратиться можно (или как оно называется). Что то типа .table td > trash-btn. Но я не могу додуматься как правильно.

Заранее спасибо!

Answer 1

element:nth-child(1) {
  border-top: none;
}

Перед тем как использовать Bootstrap и прочее фреймворки CSS, советую изучить сам CSS, хотя бы поверхностно.

Answer 2

Не совсем понял, если вам нужно сделать линию такой же жирной, добавьте еще один пустой тег th:

<thead>
    <tr>
        <th scope="col">Название</th>
        <th scope="col">Кол-во</th>
        <th scope="col">Цена</th>
        <th scope="col">Стоимость</th>
        <th scope="col"></th>
   </tr>
</thead>

Если нужно убрать линию, то используйте:

.table td.trash-btn {
    border-top: none;
}

БЛОГ НА HUSL

Как убрать границу одного элемента в бутстрапе

Ответы (2 шт):