Our online store has a variations table with prices. The cells display the original price, the sale price, and the discount percentage. We use this script to get the discount.
Since the prices are the same in all variations, the client wants the discount percentage figure to appear highlighted only once outside the table instead of repeated in each price cell for two reasons: better visibility and reduce visual noise on the prices.
The problem:
The percentage figure is displayed correctly when there's only one price as can be seen in Table 2.
But as the number of variations grows, the font smoothing disappears by showing the percentages of each price overlaid Table 1. It obviously gets worse as the number of variations and prices increase.
We have tried to solve it from the style sheet with :not(first-child) to hide the percentage of all cells below the first with no result.
Any alternative solution?
Note: the figures and percentages in the examples are not the real ones
.products .snippet-dto-porcentaje {
display: none;
}
.product .snippet-dto-porcentaje {
position: absolute;
top: 2rem;
right: 3rem;
font-size: 7rem;
font-family: 'Helvetica', sans-serif;
color: #000000;
border-radius: 5rem;
padding: 1rem;
}
table.vartable {
border-collapse: collapse;
width: fit-content;
margin: 2rem 0 4rem;
}
table.vartable>thead>tr>th {
border: 2px;
border-style: solid;
border-color: gray;
color: white;
background-color: gray;
text-align: center;
}
table.vartable td {
border: 2px;
border-style: solid;
border-color: gray;
text-align: center;
padding: 0 3rem;
}
table.vartable td.pricecol {
padding: 0 1.75rem;
}
td.pricecol>del {
padding-right: 1.75rem;
}
td.pricecol>ins>span>bdi {
padding-left: 1.75rem;
}
td.pricecol>ins>span>bdi:before {
content: "|";
margin-left: -2rem;
font-size: 3rem;
color: gray;
line-height: 0%;
position: absolute;
transform: scale(0.5, 0.6);
margin-top: 0.7rem
}<div class="product">
<table class="table vartable">
<thead>
<tr>
<th>TABLE 1</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00 €</bdi></span></del> <ins><span><bdi>10,20 €</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>
<tr>
<td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00 €</bdi></span></del> <ins><span><bdi>10,20 €</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>
<tr>
<td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00 €</bdi></span></del> <ins><span><bdi>10,20 €</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>
<tr>
<td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00 €</bdi></span></del> <ins><span><bdi>10,20 €</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>
<tr>
<td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00 €</bdi></span></del> <ins><span><bdi>10,20 €</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>
<tr>
<td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00 €</bdi></span></del> <ins><span><bdi>10,20 €</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>
<tr>
<td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00 €</bdi></span></del> <ins><span><bdi>10,20 €</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>
<tr>
<td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00 €</bdi></span></del> <ins><span><bdi>10,20 €</bdi></span></ins><span class="snippet-dto-porcentaje">30%</span>
</td>
</tr>
</tbody>
</table>
<table class="table vartable">
<thead>
<tr>
<th>TABLE 2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="pricecol" data-label="Precio">
<del aria-hidden="true"><span><bdi>12,00 €</bdi></span></del> <ins><span><bdi>10,20 €</bdi></span></ins><span class="snippet-dto-porcentaje" style="top:14rem;">30%</span>
</td>
</tr>
</tbody>
</table>
</div>
