Currently in the process of developing a web shop cart (utilizing Bootstrap 4.1) and faced with the task of creating a list of items in the cart along with their quantities, prices, and total prices... To tackle this, I opted to use a table structure but encountered an issue:
My goal was to design a table that resembles this desired layout: https://i.sstatic.net/Z6mKm.jpg
However, my initial attempt resulted in a table that looks more like this..: https://i.sstatic.net/Ik02I.jpg
Calling out to you, fellow internet dwellers, for advice on how can I achieve the table borders surrounding the "quantity" to mirror the appearance seen in the first image??? And also seeking guidance on how to combine the final cells to present the total price (23,97 €) centered within the table as depicted in the initial picture??
P.S. Wondering whether utilizing a table is indeed the correct choice or should I have considered a different element such as an or ?
Thank you in advance, intergalactic friends :)
Here's My Code: HTML:
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th scope="col"> </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;
}
}
}
}