I would like to center the arrow on each cell, but I can’t do it.
.positive-arrow:before {
content: "";
border-style: solid;
border-width: 5px 5px;
border-color: transparent transparent #0dff00 transparent;
}
I tried with position: absolute; left: 65%;, but it’s diy….
.positive-arrow:before {
content: "";
border-style: solid;
border-width: 5px 5px;
border-color: transparent transparent #0dff00 transparent;
position: absolute;
left: 65%;
}
Do you know a better solution in CSS, please?
Thank you
.w5 {
width: 5%;
}
.w30 {
width: 30%;
}
.positive-arrow:before {
content: "";
border-style: solid;
border-width: 5px 5px;
border-color: transparent transparent #0dff00 transparent;
}
.negative-arrow:before {
content: "";
border-style: solid;
border-width: 5px 5px;
border-color: #f00 transparent transparent transparent;
}
<!DOCTYPE html>
<html>
<head>
<title>HTML CSS JS</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<body>
<div class="card">
<div class="card-body">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col" class="w30">Indice</th>
<th scope="col" class="w30">Place</th>
<th scope="col" class="w5 text-center">Cours</th>
<th colspan="2" class="w5 text-center">Variation</th>
<th scope="col" class="w30 text-center">Date et heure</th>
</tr>
</thead>
<tbody>
<tr>
<td>DAX Composite</td>
<td >EuroNext</td>
<td class="text-end">1 265,45</td>
<td class="text-end"> <span class="positive-arrow"></span></td>
<td class="text-end">1,50 %</td>
<td class="text-center">21/11/2022 - 17:55</td>
</tr>
<tr>
<td>DAX</td>
<td>EuroNext</td>
<td class="text-end">14 379,93</td>
<td class="text-end"> <span class="negative-arrow"></span></td>
<td class="text-end">3,40 %</td>
<td class="text-center">21/11/2022 - 17:55</td>
</tr>
<tr>
<td>Mid Cap DAX</td>
<td>EuroNext</td>
<td class="text-end">5 379,93</td>
<td class="text-end"> <span class="positive-arrow"></span></td>
<td class="text-end">1,40 %</td>
<td class="text-center">21/11/2022 - 17:55</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>>Solution :
You need to make your pseudo elements inline block and then if you want to horizontally center them, change the class on the td to text-center (instead of text-end). If you want to vertically center them, then you need to add vertical align middle to the td
.w5 {
width: 5%;
}
.w30 {
width: 30%;
}
.positive-arrow:before {
content: "";
display: inline-block;
border-style: solid;
border-width: 5px 5px;
border-color: transparent transparent #0dff00 transparent;
}
.negative-arrow:before {
content: "";
display: inline-block;
border-style: solid;
border-width: 5px 5px;
border-color: #f00 transparent transparent transparent;
}
.vertical-center {
vertical-align: middle;
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<table class="table table-bordered">
<thead>
<tr>
<th scope="col" class="w30">Indice</th>
<th scope="col" class="w30">Place</th>
<th scope="col" class="w5 text-center">Cours</th>
<th colspan="2" class="w5 text-center">Variation</th>
<th scope="col" class="w30 text-center">Date et heure</th>
</tr>
</thead>
<tbody>
<tr>
<td>DAX Composite</td>
<td>EuroNext</td>
<td class="text-end">1 265,45</td>
<td class="text-center vertical-center"> <span class="positive-arrow"></span></td>
<td class="text-end">1,50 %</td>
<td class="text-center">21/11/2022 - 17:55</td>
</tr>
<tr>
<td>DAX</td>
<td>EuroNext</td>
<td class="text-end">14 379,93</td>
<td class="text-center vertical-center"> <span class="negative-arrow"></span></td>
<td class="text-end">3,40 %</td>
<td class="text-center">21/11/2022 - 17:55</td>
</tr>
<tr>
<td>Mid Cap DAX</td>
<td>EuroNext</td>
<td class="text-end">5 379,93</td>
<td class="text-center vertical-center"> <span class="positive-arrow"></span></td>
<td class="text-end">1,40 %</td>
<td class="text-center">21/11/2022 - 17:55</td>
</tr>
</tbody>
</table>