代码之家 › 专栏 › 技术社区 › weinde

bootstrap 4表中的自定义边框

bootstrap-4 sass twitter-bootstrap css

weinde · 技术社区 · 7 年前

所以我正在建立一个网络购物车(使用bootstrap 4.1),我必须在购物车中列出物品的数量,价格和总价…我决定使用一个表来解决这个问题,遇到了以下问题:

我想做一张这样的桌子:

我尽力给了我一张这样的桌子:

我的问题是 如何使环绕“数量”的表边框看起来像第一张图片中的那样???? 和 如何合并最后一个单元格,以使总价(23,97–alighted)与第一张图片中一样位于表格中间??

附笔。 使用一个表是一个正确的选择还是应该使用一个不同的元素,比如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;
      }
    }
  }
}

2 回复 | 直到 7 年前

Kareem Kamal 7 年前

你可以通过使用 :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;
    }
  }
}

××× × ×××× 7 年前

我们来做一个: 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%;

}