Bootstrap 4表中的自定义边框

Question

所以我正在构建一个网上商店购物车（使用 Bootstrap 4.1），我必须列出购物车中的商品数量、价格和总价......我决定使用一张桌子这并遇到了以下问题：

我正在尝试制作一个必须如下所示的表格：

我最好的尝试给了我一张看起来像这样的表格..：

我对各位互联网陌生人的问题是如何使围绕“数量”的表格边框看起来像第一张图片中的样子？？？ 以及如何合并最后一个单元格以使总价 (23,97 €) 像第一张图片一样在表格中间对齐？？

P.S. 使用表格是正确的选择还是应该使用不同的元素，例如 or ？

在此先感谢各位太空人 :)

我的代码： 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。

使用 :after

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%;

}