Пользовательские границы в таблице Bootstrap 4

Question

Итак, я создаю корзину интернет-магазина (используя Bootstrap 4.1) и мне нужно составить список товаров в корзине с количеством, ценой и общей ценой ... Я решил использовать таблицу дляэто и столкнулось со следующей проблемой:

Я пытаюсь создать таблицу, которая должна выглядеть следующим образом:

, и моя лучшая попытка дала мнетаблица, которая выглядит следующим образом ..:

Мой вопрос к вам, коллеги по Интернету, как мне сделать так, чтобы границы таблицы окружали «количество», чтобы оно выглядело какна первом изображении ??? и как объединить последние ячейки, чтобы получить итоговую цену (23,97 €), расположенную по центру таблицы, как на первом рисунке ??

PS Использует ли таблица даже основной выбор, или я должен был использовать другой элемент, такой как или?

Заранее спасибо товарищам космонавты:)

Мой код: HTML:

<div class="table-responsive">
  <table class="table">
    <thead>
      <tr>
        <th scope="col">&nbsp;</th>
        <th scope="col">Product</th>
        <th scope="col">Quantity</th>
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row">#</th>
        <td>100 % Mango</td>
        <td>1 X</td>
        <td>12.99 €</td>
      </tr>
      <tr>
        <th scope="row">#</th>
        <td>Vanilla</td>
        <td>2 x</td>
        <td>10.98 €</td>
      </tr>
    </tbody>
  </table>
</div>

SCSS:

.table {
  border-right: 1px solid #000000;
  background-color: transparent;
  color: #000000;
  text-align: center;

  thead {
    font-family: 'Alegreya', serif;
    border: none;

    th {
      border: none;
    }
  }

  tbody {
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    font-size: 1.5rem;

    th, td {
      border: none;

      &:nth-child(3) {
        border-right: 2px solid #000000;
        border-left: 2px solid #000000;
      }
    }
  }
}

Answer 1

Этого можно добиться, используя :after, как описано ниже, и используя обычный border-right для четвертого ряда.

с: после

td{
  position:relative; //positioning the td so that the :after would use it for absolute positioning
  //for the small borders on 2nd and 3rd columns
  &:nth-child(2):after,&:nth-child(3):after{
    content:'';
    width:2px;
    height:20px;
    background:#000;
    display:block;
    position:absolute;
    top:50%;
    right:0;
    transform:translateY(-50%); //moving the element back up by half its height to center it vertically
  }
  //for the big border on the 4th column
  &:nth-child(4){
    border-right:2px solid #000; //do that for the th aswell
  }
}

Полный код:

.table {
  border-right: 1px solid #000000;
  background-color: transparent;
  color: #000000;
  text-align: center;
  thead {
    font-family: 'Alegreya', serif;
    border: none;

    th {
      border: none;
      &:nth-child(4){
        border-right:2px solid #000;
      }
    }
  }

  tbody {
    font-weight: 700;
    text-transform: uppercase;
    border: none;
    font-size: 1.5rem;
    td{
      position:relative;
      &:nth-child(2):after,&:nth-child(3):after{
        content:'';
        width:2px;
        height:20px;
        background:#000;
        display:block;
        position:absolute;
        top:50%;
        right:0;
        transform:translateY(-50%);
      }
      &:nth-child(4){
        border-right:2px solid #000;
      }
    }
    th, td {
      border: none;
    }
  }
}

Answer 2

Здесь мы работаем один: https://jsfiddle.net/b2f03y1p/17/

Вместо этого кода :

  &:nth-child(3) {
    border-right: 2px solid #000000;
    border-left: 2px solid #000000;
  }

Используйте этокод:

   td:nth-child(2):after,td:nth-child(3):after{
    content: '';
    height: 21px;
    width: 2px;
    background-color: black;
    position: absolute;
    top: 35%;
    left: 90%;

}
   td:nth-child(4):after{
    content: '';
    height: 100%;
    width: 2px;
    background-color: black;
    position: absolute;
    left: 90%;

}