Custom borders in Bootstrap 4 table

Question

So I'm building a web shop cart (using Bootstrap 4.1) and I have to make a list of items in the cart with quantity, the price and total-price... I've decided to use a table for this and ran into an following problem:

I'm trying to make a table that has to look like this:

and my best attempt gave me a table that looks like this..:

My question to you fellow internet strangers is how do I make the table borders surounding the "quantity" to look like in the first picture??? and how do I merge the last cells to get the total price (23,97 €) alighned in the middle of the table like in the first picture??

P.S. Is using a table even a corect choice or should I have used a different element like an or ?

Thanks in advance fellow spacemans :)

My Code: 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;
      }
    }
  }
}

You could use `pseudoselements` (`:before` and/or `:after`) to achieve that. You wont get your desired styling trough styling the `td` tho as those will always be "full height" so they _touch_ each other always. — Fabian S., Jun 06 '18 at 06:03
@FabianSchöner how exactly do you mean i shuld use the :before and/or :after pseudoelements? can you please give me an example? — weinde, Jun 06 '18 at 06:05
i made a very basic example with `:after` here: https://jsfiddle.net/k0on5tzv/1/ — Fabian S., Jun 06 '18 at 06:08
@FabianSchöner any idea how to join/merge the last cels to get the last part of the table looking like the one in the firt picture? — weinde, Jun 06 '18 at 07:39

לבני מלכה · Answer 1 · 2018-06-06T06:41:02.463

1

Here us working one:https://jsfiddle.net/b2f03y1p/17/

Instead this code:

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

Use this code:

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

}

edited Jun 06 '18 at 06:41

answered Jun 06 '18 at 06:27

לבני מלכה

15,925
2
23
47

you can combine the first and the second blocks – Kareem Kamal Jun 06 '18 at 06:39
tell me for more help – לבני מלכה Jun 06 '18 at 06:56
any idea how to join/merge the last cels to get the last part of the table looking like the one in the firt picture? – weinde Jun 06 '18 at 07:39

Kareem Kamal · Accepted Answer · 2018-06-06T06:37:53.963

You can achieve that using :after as described below, and using normal border-right for the forth row.

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
  }
}

Full Code:

.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;
    }
  }
}

Nice one man :) looks exactly like what i needed :D thanks fellow internet stranger!! — weinde, Jun 06 '18 at 07:09
any idea how to solve the second part? "how do I merge the last cells to get the total price (23,97 €) alighned in the middle of the table like in the first picture?" — weinde, Jun 06 '18 at 07:37
see [this page](https://www.w3schools.com/tags/att_td_rowspan.asp) , you can use `rowspan` to make the total price span all columns, also give this cell `vertical-align:middle` so it's centered, if you don't know how many columns it will span see [this](https://stackoverflow.com/questions/398734/colspan-all-columns) — Kareem Kamal, Jun 06 '18 at 10:42

Custom borders in Bootstrap 4 table

2 Answers2