Bootstrap 4表

Question

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

我试图创建一个必须如下所示的表格：

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

我向你的网络陌生人提出的问题是如何使桌面边界超过＆＃34;数量＆＃34;看起来像第一张照片??? 和如何合并最后一个单元格以获得总价格（23,97€）在表格中间相同，如第一张图片中所示？

P.S。使用表格甚至是核心选择，还是应该使用其他元素，如或？

提前感谢太空人：）

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

我们在这里工作： 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%;

}

Answer 2

您可以使用:after完成此操作，如下所述，并使用普通border-right作为第四行。

with：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;
    }
  }
}